切圖網(wǎng)長期致力于web前端開發(fā)外包服務(wù)，而我們也關(guān)注到現(xiàn)在圖標(biāo)很多時候采用svg更多一點(diǎn)，然后圖標(biāo)字體文件已經(jīng)提供了很多種類的圖標(biāo)，不過采用svg圖標(biāo)可以自行選擇更符合、更好看的圖標(biāo)，相比于字體圖標(biāo)更加多樣性，而且svg圖標(biāo)加載更快，而當(dāng)svg的圖標(biāo)被多次使用的時候，我們需要一種類似于變量的定義，然后在需要的地方使用，具體使用方法附一段片段，親測有用。

<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 聲明要重復(fù)使用的標(biāo)簽
下邊use 通過id 引用defs聲明的標(biāo)簽

關(guān)于svg的defs以及use的解釋

SVG的 元素用于預(yù)定義一個元素使其能夠在SVG圖像中重復(fù)使用。例如你可以將一些圖形制作為一個組，并用 元素來定義它，然后你就可以在SVG圖像中將它當(dāng)做簡單圖形來重復(fù)使用。
SVG 元素可以在SVG圖像中多次重用一個預(yù)定義的SVG圖形，包括 元素和元素。被重用的圖形可以在定義 的內(nèi)部（圖形將不可見直到使用use來引用它）或外部。

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