1. SVG

SVG 是一種可縮放的矢量圖形，縮放就是縮小和放大，無論放大多少倍都不會失真，這就很適合用來做響應式和自適應網站的圖標，因為在移動端的時候需要圖形小一點，PC 端的時候稍微大一點。

并且放大多倍的時候也不會出現明顯的鋸齒狀。這是它明顯優于 JPG 及 PNG 的地方。

接下來我們將這個圓形放大幾倍再看看：

可以看到圖片依然清晰銳利，因為 SVG 里面保存的是形狀和顏色，所以即使縮放也只是重新計算了一下坐標罷了。

2. 清晰度

可能會有較真的同學問：我仔細看了 SVG 圖片，圖片邊緣依然還是有“鋸齒”啊。

這里我要告訴大家的是：畢竟 SVG 也是要顯示在屏幕上的，屏幕也是有像素限制的，比如比較流行的 1920 * 1080。

如果換一臺蘋果電腦的 5K 顯示屏，可能就看不到“鋸齒”啦。

3. 小結

說完了圖片格式，我們再來說一說圖片的形狀。

Css Sprite的形狀通常會分為排成一行的條形圖，和多行多列的矩形圖。

那么這兩者之間有什么區別呢？答案就在下一小節。