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