使用SVG中的Symbol元素制作Icon
1.相比png而言，SVG的优势
1）SVG是矢量图形文件，可以随意改变大小，而不影响图标质量。
2）可以用CSS样式来自由定义图标颜色，比如颜色/尺寸等效果。
3）所有的SVG可以全部在一个文件中，节省HTTP请求。
4）使用SMIL、CSS或者是javascript可以制作充满灵性的交互动画效果。
5）由于SVG也是一种XML节点的文件，所以可以使用gzip的方式把文件压缩到很小。
2.在web开发中，SVG主要有下面几种使用方法
1）使用img和object标签直接引用svg。这种方法的缺点主要在于要求每个图标都单独保存成一个SVG文件，使用时也是单独请求的，增加了HTTP请求。
2）Inline SVG，直接把SVG写入 HTML 中，这种方法简单直接，而且具有非常好的可调性。Inline SVG 作为HTML文档的一部分，不需要单独请求。临时需要修改某个图标的形状也比较方便。但是Inline SVG使用上比较繁琐，需要在页面中插入一大块SVG代码不适合手写，图标复用起来也比较麻烦。
3）SVG Sprite。这里所说的Sprite技术，没错，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。其实基础的SVG Sprite也只是将原来的位图改成了SVG而已。
4）使用svg中的
3.how to use symbol svg
推荐的方法是将上述SVG作为body的第一个元素插入在HTML中， 此后，在需要显示某个 Icon 的地方插入相应代码即可：
<svg class="icon icon-tumblr2"><use xlink:href="#icon-tumblr2"></use></svg>
这里面主要是靠id进行映射的。这种方法不需要像Sprite那样繁琐的设置图片的位移。
参考文章：