svg图标的使用方法

为什么要用svg而没有用icon?
1.因为svg图标在任何设备下都可以高清显示，不会模糊。而icon会在显卡比较低的电脑上有显示模糊的情况
2.svg图标在页面render时 速度会比icon稍微快一点

svg在html里的使用方式：
1.svg inline

<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>home</title>
<path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
</svg>
</div>

2.svg sprite
通俗的说就是把单个 svg 合并到一大个 svg 文件里面

IconMoon工具：

1.导入或选择自己需要的图标
2.点击左下角 Generate SVG & More
3.依次点击下载
4.打开压缩包中的 symbol-defs.svg 文件，复制 <symbol … 贴入你的 symbol.svg 中即可使用

symbol.svg文件：

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; ove