Fatesinger

即使你没听过SVG Sprite，那么image sprite 你一定知道了，就是我们常说的精灵图。图标图形整合在一起，实际呈现的时候准确显示特定图标。

image sprite 是通过background-image 和坐标来实现的，svg sprite则是通过symbol和use来实现的。

介绍这个东西也是有一定的原因的，在最新版本的windows的Edge 下，字体图标是无法显示的，原因是windows的安全性策略，我自己不用windows，所以具体版本就不清楚了。

使用方法也比较简单，把所有的SVG图标都在一个SVG源上，然后用id调用就可以了。

参考代码

<svg viewBox="0 0 100 100"> <use xlink:href="#icon-1"></use> </svg>

use元素是通过xlink:href属性，寻找要使用的元素的。#icon-1对应的就是id为icon-1的元素。

那么问题来了，如何制作SVG源，这里推荐使用icomoon.io 这个网站，可以直接到处svg。

可以设置默认的图标大小

下载解压后得到如下文件

里面有示例代码，最后的symbol-defs.svg就是我们需要的源文件。可以把里面的内容直接复制到body标签里。同时也支持外链，但要注意同源问题。将文件上传到指定路径，然后使用下面的代码调用。

<svg viewBox="0 0 100 100"> <use xlink:href="symbol-defs.svg#icon-1"></use> </svg>

xlink:href="symbol-defs.svg#icon-1" 是对应文件路径。外链的话IE是不支持的，Edge 没有问题。

svg 和字体图标一样，也是可以通过css来控制的，完美。

另外因为SVG是纯正的字符串，所以可以使用localstorage 来储存信息。