1. SVG
SVG 是一種可縮放的矢量圖形,縮放就是縮小和放大,無論放大多少倍都不會失真,這就很適合用來做響應式和自適應網站的圖標,因為在移動端的時候需要圖形小一點,PC 端的時候稍微大一點。
并且放大多倍的時候也不會出現明顯的鋸齒狀。這是它明顯優于 JPG 及 PNG 的地方。
接下來我們將這個圓形放大幾倍再看看:
可以看到圖片依然清晰銳利,因為 SVG 里面保存的是形狀和顏色,所以即使縮放也只是重新計算了一下坐標罷了。
2. 清晰度
可能會有較真的同學問:我仔細看了 SVG 圖片,圖片邊緣依然還是有“鋸齒”啊。
這里我要告訴大家的是:畢竟 SVG 也是要顯示在屏幕上的,屏幕也是有像素限制的,比如比較流行的 1920 * 1080。
如果換一臺蘋果電腦的 5K 顯示屏,可能就看不到“鋸齒”啦。
3. 小結
說完了圖片格式,我們再來說一說圖片的形狀。
雪碧圖的形狀通常會分為排成一行的條形圖,和多行多列的矩形圖。
那么這兩者之間有什么區別呢?答案就在下一小節。