Css Sprite教程

SVG 格式图片

1. SVG

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

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

编程之家


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

编程之家


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


2. 清晰度

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

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

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

3. 小结

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

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

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

返回顶部