前端世界变化好快，一时之间，SVG已经大有取代Icon Font 作为网页中显示图标的实现方案之势，相比Icon Font，它具有如下优点：
如果想具体看看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。
参考文章：
原文：https://www.cnblogs.com/TianFang/p/12548154.html