使用SVG symbols建立圖標系統完整指南

從最開始的使用img圖片，到後來的使用css sprite來減少伺服器請求，再到流行的圖形字體化圖標Iconfont。現在，一種全新的圖標使用方式開始流行了起來——SVG symbols圖標。

工作原理

SVG symbols的工作原理：symbol元素用來定義一個圖形模板對象，它可以用一個use元素實例化。

symbol元素對圖形的作用是在同一文檔中多次使用，symbol元素本身是不呈現的。只有symbol元素的實例（亦即，一個引用了symbol的use元素）才能呈現：

<svg>
  <symbol viewBox="0 0 24 24" id="heart">
    <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z">
    </path>
  </symbol>
  <symbol viewBox="0 0 32 32" id="arrow">
    <path fill="#0f0f0f" d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M22.8,13.6l-6,8C16.6,21.9,16.3,22,16,22 s-0.6-0.1-0.8-0.4l-6-8c-0.2-0.3-0.3-0.7-0.1-1S9.6,12,10,12h12c0.4,0,0.7,0.2,0.9,0.6S23,13.3,22.8,13.6z">
    </path>
  </symbol>
</svg>

這段代碼使用SVG symbols定義了兩個圖標，每個symbol元素定義一個圖標，圖標id分別是heart和arrow，將其放在html文件的body元素內。

通過以下代碼引用id為heart的圖標：

<svg>
    <use xlink:href="#heart"/>
</svg>

xlink:href屬性值就是‘#’加symbol的id名稱，那麼只需改變這個屬性值就可以引用不同的圖標。

自動化處理

更多內容請查看原文：使用SVG symbols建立圖標系統完整指南