今天在看項目的時候，出現(xiàn)了這么一行代碼，想了半天也不太明白，廢話不多說，上代碼：
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-quqian"></use></svg>
然后就百度了一下，不過感覺說的都不太明白，但自己又非常想搞清楚，就查了很多資料，終于明白了。
它的原理就是利用了SVG symbols建立圖標(biāo)，然后通過<use>標(biāo)簽使用，下面具體說一下：
<symbol>元素用來對元素進(jìn)行分組；它不會被直接顯示，大概相當(dāng)于定義一個模板，然后使用<use>元素引用并進(jìn)行渲染。
單個圖標(biāo)的建立：
<body>
<svg style="display: none;">//因為即使<symbol>本身沒有顯示，但是包裹它的<svg>元素依舊會渲染并占用一些頁面空間
<symbol viewBox="0 0 24 24" id="heart">//viewBox屬性定義了圖標(biāo)的寬高比，前兩個一般為0,0,后面為SVG的寬和高
<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>
</svg>
<svg>
<use xlink:href="#heart"/> //使用xlink:href屬性來指定你想要展示哪一組圖標(biāo)，這里，我們要展示的是id為#heart的<symbol>元素。
</svg>
</body>
結(jié)果如下：
接下來就可以建立自己的SVG sprite了，就是圖標(biāo)庫。
<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>
//這里可以放很多個<symbol>個圖標(biāo)，注意給<symbol>元素都設(shè)置一個id，這個id用來在后面使用<use>的時候引用
</svg>
我們的SVG sprite現(xiàn)在可以投入使用了。你可以保存文件為icons.svg，放在資源文件夾中（根據(jù)自己習(xí)慣，這里以img為例）。
頁面中哪里要用直接插入以下一段：
<svg>
<use xlink:href="img/myicons.svg#heart"/>
</svg>
如果想給圖標(biāo)加顏色或者其他屬性，只需要給<svg>指定一個class即可
<svg class="icon my-class-name">
<use xlink:href="img/myicons.svg#heart"></use>
<svg>
在IE中通過<use>引用外部SVG文件的方法是不可行的，IE9以上也不行（不過，這個問題在Edge中已經(jīng)解決了）
第一種：
我們可以在文檔的頂部引入SVG sprite，然后使用<use>標(biāo)簽引用圖標(biāo)
<svg style="display: none;"> <!-- this is our svg sprite -->
<symbol viewBox="0 0 24 24" id="heart">
<path 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">
<!-- ... -->
</symbol>
</svg>
<svg>
<use xlink:href="#heart"/> <!-- this is our visible icon -->
</svg>
第二種：
在Github repo中下載這個polyfill，在文檔中引入，就ok了
原理是：這個polyfill可以根據(jù)<use>元素的引用，獲取外部SVG資源中的id，而瀏覽器本身并不能這樣做?；具h(yuǎn)離就是，這個polyfill遍歷文檔中的<use>元素，然后如果它引用的是瀏覽器無法加載的外部SVG文件，它就在外部SVG中抓取并預(yù)置到文檔中的<body>中。
原文: http://www.w3cplus.com/svg/how-to-create-an-icon-system-using-svg-symbols.html ? w3cplus.com
