SVG sprite——新的前台图标处理方案

我们在开发前台页面应使用的时候，常常要使用到少量小图标，比方首页、上传、位置、电话、分享，购物车等各式各样的图标。假如每个图标都发送一次http请求的话，这会较大的影响前台性能。通常会将所有图标整合到一起，只占使用一个http请求。整合的方式有CSS sprite和iconfont。

CSS sprite的原理其实很简单，就是把所有使用到的图标拼接到同一张png图片里，给图标元素设置背景图片，并通过CSS调整元素的background-position属性，使同一张背景图的不同部位在不同的元素中展示。要注意的是，元素的background-size设置的值应该和元素的大小成肯定的倍数关系。比方设置了图标元素的宽高是40px，而png里每个图标的大小是80*80，这时候background-size应该是”50% auto”。为什么我们在合并图标的时候要做大一点呢？由于在手机上使用，而手机通常是2倍屏、2.5倍屏，甚至3倍屏，按照肯定的比例做大一点，这样在手机上使用才不会发虚。