如何在页面中引入SVG图标

最近在写项目的时候，碰到页面上一些高清图标需要用svg格式引入，这篇文章将会总结一下怎样在页面中使用SVG图标。

SVG的简介

SVG是一种可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。
简单的理解它是图形的另一种格式，例如它和常见的图片格式.png、.jpg、.gif等是一类。 关于SVG的一些具体的使用示例可以戳这篇三看 SVG Web 动效

在页面中引入SVG图标

对SVG进行“瘦身”

在拿到设计师给的SVG图片之后，我们先对它进行一点小小的修改，保留svg标签内的viewBox属性，以及路径path的代码段，并用模板标签symbol来替换svg标签，得到的效果大致如下

<svg style="display: none">
    <symbol viewBox="0 0 145.5 121.5" id="share">
        <path class="st0" d="M88.9,0l56.6,56.7l-56.6,56.7V81c0,0-56.1-6.2-88.9,40.5c0,0,10.3-89.1,88.9-89.1V0z" />
    </symbol>
</svg>

然后将其插进html页面中的svg标签内，你可以为svg标签设置内联样式display: none这样它就不会在页面中显示了
对了，不要忘记在symbol标签内添加相应的id属性，方便在页面中相应位置进行引用

在相应位置以svg标签引入SVG

用use引用上文中的symbol集合，xlink:href 属性指定引用的id

<svg viewBox="0 0 200 200">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#commit"></use>
</svg>

以上就是在页面中引入SVG的总结。