本文正在参加「金石计划 . 瓜分6万现金大奖」
CSS Sprites
CSS Sprites 翻译为 CSS 贴图、图像精灵（sprite，意为精灵），指图像合并，通过 CSS 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> 元素的联合使用。
- 对同一文档中多次使用的图形使用
<symbol>元素可以增加结构和语义。 - 结构丰富的文档可以以图形方式、语音或盲文形式呈现，从而提高可访问性和无障碍。
- 一个
symbol元素本身是不呈现的，只有symbol元素的实例（即一个引用了symbol的<use>元素）才能呈现。 <symbol>可以拥有单独的viewBox和preserveAspectRatio坐标系属性。而<g>元素和<defs>元素则没有这些属性，这要比<defs>元素方便，例如创建包含多个具有完全不同边界的图标 fontAwesome 字体。- SVG 中的
use元素支持外链 SVG 文件，即可以调用其他 SVG 文件的元素，所以我们只要在页面使用use元素链接到一个 Sprite(包含各个图标的<symbol>元素) SVG 文件，然后图标尺寸由 CSS 控制即可。
对比 font-face
font-face在部分 win 系统下，字体较小的时候，会产生锯齿。font-face异步加载会延时渲染。- 某些浏览器下
font-face有跨域问题。 - SVG 图标具备
font-face几乎所有的优点：尺寸、颜色可由 CSS 定制。 - SVG 图标支持渐变色。
- SVG 图标中每个
path元素可以独立控制。
CSS clip-path 联合 SVG
- CSS
clip-path属性除了剪裁圆、多边形之外，还支持url()函数语法，即可以把 SVG 元素中的路径作为剪裁路径。 - SVG 提供了
clipPathUnits属性用于指示<clipPath>元素内容要使用哪种坐标系，默认userSpaceOnUse（相对创建剪切路径时定义的根坐标），设为objectBoundingBox（相对于应用剪切路径的元素的边界框，坐标系的原点是对象边界框的左上角，对象边界框的宽度和高度都具有 1 个单位值的长度）模式的数值，即可以将剪裁的图标适用于任意的 HTML 元素尺寸。
对比 SVG Sprites
| 支持 | 传统 SVG Sprites | clipPath Sprites |
|---|---|---|
| 矢量 | ✔ | ✔ |
| 颜色可变 | ✔ | ✔ |
| 支持渐变 | ✘ | ✔ |
| 标签 | svg>use | 任意 HTML 标签（IE 除外） |
| 兼容性 | IE9+ | IE9+（需使用 SVG 元素） |
| 尺寸控制 | 灵活 | transform 方法受限，clipPathUnits 方法灵活 |
| 工具 | 丰富 ✔ | 起步中…… |
