前端世界變化好快，一時之間，SVG已經大有取代Icon Font 作為網頁中顯示圖標的實現方案之勢，SVG作為圖標具有如下優點：
-
縮放無損還原，顯示清晰
-
語義性良好
-
可用CSS控制圖標樣式以及動畫
-
減少http請求
如果想具體看看svg和icon font具體對比對比，可以參考下CSS Trick的《Inline SVG vs Icon Font》這篇文章。
使用SVG圖標有如下方法：
1.使用img、object、embed 標簽直接引用SVG
此方法的缺點主要在於每個圖標都需單獨保存成一個 SVG 文件，使用時單獨請求，增加了HTTP請求數量。
<img src="http://www.w3school.com.cn/svg/rect1.svg" width="300" />
2.Inline SVG，直接把SVG寫入 HTML 中
Inline SVG 作為HTML文檔的一部分，不需要單獨請求。臨時需要修改某個圖標的形狀也比較方便。但是Inline SVG使用上比較繁瑣，需要在頁面中插入一大塊SVG代碼不適合手寫，圖標復用起來也比較麻煩。
<body>
<svg width="100%" height="100%">
<rect x="20" y="20" width="250" height="250" style="fill:#fecdddd;"/>
</svg>
</body>
3. SVG Defs/Symbols
一些提供制作 Icon Font 功能的網站(如icomoon)已經提供輸出 SVG Sprites 。和傳統的位圖的雪碧圖一樣，將所有的圖標以一定的間隔排列起來組成一整張大圖片后，可以有效減少web請求次數。
更方便的是，我們可以使用類似引用的方式使用圖標了。
<svg class="icon">
<use xlink:href="/img/posts/svg-icons.svg#circle-check"></use>
</svg>
<svg class="icon">
<use xlink:href="/img/posts/svg-icons.svg#circle-cross"></use>
</svg>
這個是我推薦的方式，除了自己制作外，一些項目也提供了SVG Sprites下載，如tabler-icons。
參考文章：