前端切图之svg图标的复用基于defs和use 亲测有用

切图网长期致力于web前端开发外包服务，而我们也关注到现在图标很多时候采用svg更多一点，然后图标字体文件已经提供了很多种类的图标，不过采用svg图标可以自行选择更符合、更好看的图标，相比于字体图标更加多样性，而且svg图标加载更快，而当svg的图标被多次使用的时候，我们需要一种类似于变量的定义，然后在需要的地方使用，具体使用方法附一段片段，亲测有用。

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<svg id="arrow" t="1679131367532" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2751" ><path d="M853.333333 507.733333H128v42.666667h733.866667l-145.066667 145.066667 29.866667 29.866666 192-192L746.666667 341.333333l-29.866667 29.866667 136.533333 136.533333z" p-id="2752"></path></svg>

<svg id="arrow2" t="1679142433896" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5839" ><path d="M709.845333 250.346667a22.4 22.4 0 0 1 0.533334-30.848 20.48 20.48 0 0 1 29.717333 0.64l272.426667 292.693333-272.426667 292.650667a20.458667 20.458667 0 0 1-29.717333 0.64c-8.32-8.32-8.746667-21.973333-0.533334-30.848l242.346667-262.464-242.346667-262.464z" p-id="5840"></path></svg>
</defs>
</svg>

<use xlink:href="#arrow2" fill="#ffffff"></use></svg>

很明显上面defs 声明要重复使用的标签
下边use 通过id 引用defs声明的标签

关于svg的defs以及use的解释

SVG的 元素用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组，并用 元素来定义它，然后你就可以在SVG图像中将它当做简单图形来重复使用。
SVG 元素可以在SVG图像中多次重用一个预定义的SVG图形，包括 元素和元素。被重用的图形可以在定义 的内部（图形将不可见直到使用use来引用它）或外部。

标签：defs, svg, use

文章来源：http://www.qietu.com/svg-defs-use/