SVG 格式图片

1. SVG

SVG 是一种可缩放的矢量图形，缩放就是缩小和放大，无论放大多少倍都不会失真，这就很适合用来做响应式和 自适应网站 的图标，因为在移动端的时候需要图形小一点，PC 端的时候稍微大一点。

并且放大多倍的时候也不会出现明显的锯齿状。这是它明显优于 JPG 及 PNG 的地方。

接下来我们将这个圆形放大几倍再看看：

可以看到 图片 依然清晰锐利，因为 SVG 里面保存的是形状和颜色，所以即使缩放也只是重新计算了一下坐标罢了。

2. 清晰度

可能会有较真的同学问：我仔细看了 SVG  图片 ， 图片 边缘依然还是有“锯齿”啊。

这里我要告诉大家的是：毕竟 SVG 也是要 显示 在屏幕上的，屏幕也是有像素限制的，比如比较流行的 1920 * 1080。

如果换一台苹果电脑的 5K  显示 屏，可能就看不到“锯齿”啦。

3. 小结

说完了 图片 格式，我们再来说一说 图片 的形状。

Css Sprite的形状通常会分为排成一行的条形图，和多行多列的矩形图。

那么这两者之间有什么区别呢？答案就在下一小节。

查看更多关于SVG 格式图片的详细内容...