从最开始的使用img图片，到后来的使用css sprite来减少服务器请求，再到流行的图形字体化图标Iconfont。现在，一种全新的图标使用方式开始流行了起来——SVG symbols图标。
工作原理
SVG symbols的工作原理：symbol元素用来定义一个图形模板对象，它可以用一个use元素实例化。
symbol元素对图形的作用是在同一文档中多次使用，symbol元素本身是不呈现的。只有symbol元素的实例（亦即，一个引用了symbol的use元素）才能呈现：
这段代码使用SVG symbols定义了两个图标，每个symbol元素定义一个图标，图标id分别是heart和arrow，将其放在html文件的body元素内。
通过以下代码引用id为heart的图标：
xlink:href属性值就是‘#’加symbol的id名称，那么只需改变这个属性值就可以引用不同的图标。
自动化处理
更多内容请查看原文：使用SVG symbols建立图标系统完整指南