前端世界变化好快，一时之间，SVG已经大有取代Icon Font 作为网页中显示图标的实现方案之势，SVG作为图标具有如下优点：
-
缩放无损还原，显示清晰
-
语义性良好
-
可用CSS控制图标样式以及动画
-
减少http请求
如果想具体看看svg和icon font具体对比对比，可以参考下CSS Trick的《Inline SVG vs Icon Font》这篇文章。
使用SVG图标有如下方法：
1.使用img、object、embed 标签直接引用SVG
此方法的缺点主要在于每个图标都需单独保存成一个 SVG 文件，使用时单独请求，增加了HTTP请求数量。
<img src="http://www.w3school.com.cn/svg/rect1.svg" width="300" />
2.Inline SVG，直接把SVG写入 HTML 中
Inline SVG 作为HTML文档的一部分，不需要单独请求。临时需要修改某个图标的形状也比较方便。但是Inline SVG使用上比较繁琐，需要在页面中插入一大块SVG代码不适合手写，图标复用起来也比较麻烦。
<body>
<svg width="100%" height="100%">
<rect x="20" y="20" width="250" height="250" style="fill:#fecdddd;"/>
</svg>
</body>
3. SVG Defs/Symbols
一些提供制作 Icon Font 功能的网站(如icomoon)已经提供输出 SVG Sprites 。和传统的位图的雪碧图一样，将所有的图标以一定的间隔排列起来组成一整张大图片后，可以有效减少web请求次数。
更方便的是，我们可以使用类似引用的方式使用图标了。
<svg class="icon">
<use xlink:href="/img/posts/svg-icons.svg#circle-check"></use>
</svg>
<svg class="icon">
<use xlink:href="/img/posts/svg-icons.svg#circle-cross"></use>
</svg>
这个是我推荐的方式，除了自己制作外，一些项目也提供了SVG Sprites下载，如tabler-icons。
参考文章：