使用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創建圖標系統完整指南