CSS background-position、clip-path 和 SVG Sprites 小图标生成方法

CSS Sprites

CSS Sprites 翻译为 CSS 贴图、图像精灵（sprite，意为精灵），指图像合并。它使用 CSS background-position 属性定位图像的一部分来使用，使得使用一个图像文件可以替代多个小文件。但是使用 background-position 有很多缺点：

• 不便于维护和扩展、定位不精确等问题，例如：在后期项目迭代中我们需要删除其中一个小图，那么排在它后面的小图位置都要移动，需要再次修改 CSS 样式，或每次都要打开 PS 删除某图标再导出。
• 无法修改小图颜色，要 UI 设计师调整后替换。
• 在移动端的大屏手机图标会模糊。

SVG Sprites

类似于 CSS 中的 Sprite，图标图形整合在一起，实际呈现的时候准确显示特定图标。

• SVG Sprites 使用 xlink:href #id 的方式获取，便于维护和扩展，因为小图的 id 不会随便改动;
• 方便改变图片颜色，通过设置 fill: 颜色值，随意改变小图颜色;
• IE9 以上支持。

symbol

目前，SVG Sprite 最佳实践是使用 <symbol> 元素。<symbol> 元素用于定义可由 <use> 元素实例化的图形模板对象。SVG Sprite 即是 <symbol> + <use> 元素的联合使用。