最简单的SVG图标使用方式

简介

Icon Sprite ：CSS精灵或雪碧图，是一种网页图片应用处理方式。原理是，把网页中一些Icon整合到一张图片文件中。再通过一定方式从图片文件中取出所需Icon并显示。其中CSS Sprite、Icon Font使用最多。

CSS Sprite：
原理是将多个icon按一定规律整合到图片文件中，再利用CSS的"background-image"，“background-repeat”，"background-position"的组合进行图片定位并显示。优点：技术成熟，兼容性好；缺点：在实际需求中需为保存不用颜色、大小的Icon，最终难以管理。

Icon Font：
原理是将Icon定义为图片字体，在CSS中用@font-face引入Icon Font自定义字体, 再利用font-family和字符码显示出指定的图标。优点：维护比图片方便；缺点：只有单色，字体生成比CSS Sprite更复杂。

SVG Sprite介绍

SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称, 是一种用来描述二维矢量图形的XML标记语言. SVG图形不依赖于分辨率, 因此图形不会因为放大而显示出明显的锯齿边缘。

优点
相比CSS Sprite和Icon Font有着明显的优势，CSS Sprite技术成熟兼容性好，

• 放大缩小不会失真（不依赖于分辨率，放大显示出明显得锯齿边缘）
• 大小颜色等属性自定义灵活
• 体积小同时管理方便

缺点
虽然灵活度高，但SVG兼容性有待考究，其渲染性能也不及图片和字体那么高，可能在某些情况下不适用。但在一般的场景中，svg sprite 还能够给开发带来很大的便利。

使用

1、在阿里巴巴的图标库(https://www.iconfont.cn/)选择图标后 -> 点击下载SVG ->（选择颜色、大小后）点击复制SVG。

2、粘贴在html中。也可在粘贴的代码中修改Icon大小和颜色。

进一步深入了解和使用，参考文章：
https://www.jianshu.com/p/5723a9dacd92
https://www.runoob.com/svg/svg-tutorial.html