SVG Sprites的使用

https://blog.csdn.net/qq_36648555/article/details/78440805

Defs/Symbols方案

这种其实就是在SVG Sprites上面更进一步的使用了，SVG Sprites是需要我们去通过坐标获取对应位置图标的，但是SVG Defs/Symbols就更简单了，直接通过给每个SVG ICON定义ID，直接调用对应ID即可：

<svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)">

    <symbol id="icon1"viewBox="0 0 32 32">

        <path fill="#444444"d="M3 3h1v12h-1v-12z"></path>

    </symbol>

    <symbol id="icon2"viewBox="0 0 32 32">

         <path fill="#444444"d="M3 14h10v1h-10v-1z"></path>

    </symbol>

</svg>

将上面代码保存为SVG文件后，在HTML我们通过下面的方式可以直接调用：

<svg>

    <use xmlns:xlink="[http://www.w3.org/1999/xlink](http://www.w3.org/1999/xlink)"xlink:href="/svg/symbol.svg#icon1"></use>

</svg>

<svg>

    <use xmlns:xlink="[http://www.w3.org/1999/xlink](http://www.w3.org/1999/xlink)"xlink:href="/svg/symbol.svg#icon2"></use>

</svg>