1. SVG
SVG 是一种可缩放的矢量图形，缩放就是缩小和放大，无论放大多少倍都不会失真，这就很适合用来做响应式和自适应网站的图标，因为在移动端的时候需要图形小一点，PC 端的时候稍微大一点。
并且放大多倍的时候也不会出现明显的锯齿状。这是它明显优于 JPG 及 PNG 的地方。
接下来我们将这个圆形放大几倍再看看：
可以看到图片依然清晰锐利，因为 SVG 里面保存的是形状和颜色，所以即使缩放也只是重新计算了一下坐标罢了。
2. 清晰度
可能会有较真的同学问：我仔细看了 SVG 图片，图片边缘依然还是有“锯齿”啊。
这里我要告诉大家的是：毕竟 SVG 也是要显示在屏幕上的，屏幕也是有像素限制的，比如比较流行的 1920 * 1080。
如果换一台苹果电脑的 5K 显示屏，可能就看不到“锯齿”啦。
3. 小结
说完了图片格式，我们再来说一说图片的形状。
Css Sprite的形状通常会分为排成一行的条形图，和多行多列的矩形图。
那么这两者之间有什么区别呢？答案就在下一小节。