隨著前端技術的發展，有越來越多的方法實現icon的製作，同時為了滿足市面上各種大螢幕解析度，字型圖示icon font應運而生，字型圖示的製作也是一種全新的設計方式，但是icon font 在windows系統下，字型較小時，鋸齒問題比較嚴重，那麼今天要講的svg sprite，不僅可以隨意改變圖示大小不會產生鋸齒，還能隨心所欲的填充顏色。
下面來來介紹一下向量圖形SVG Sprite在頁面中的應用。
第一步：製作SVG圖示
首先的準備一套SVG圖示，我們直接到icomoon.io上下載。
1.選中圖示
2.點選Generate
3.下載
然後我們可以在解壓檔案中，找到對應的svg圖示資料夾。
第二步：合併SVG圖示
準備好svg圖示後，我們需要把多個svg圖示整合到一個svg檔案中。
這裡需要用到自動化合並工具（grunt），grunt有個名為svgstore的外掛。
關於grunt環境的安裝，就不在這闡述 。
環境安裝好後，在專案目錄下執行下面的命令，安裝外掛：
安裝好後，可以看到grunt-svgstore資料夾裡有個Gruntfiles.js配置檔案。
我們加入以下兩段程式碼：
瞭解更多配置項：https://www.npmjs.com/package/grunt-svgstore
配置好以後，我們需要把第一步下載下來的svg圖示，放到sprites資料夾中，如下圖：
到這為止，一切準備就緒，只需進入到 grunt-svgstore目錄，執行命令：
執行命令後，可以看到成功建立了sprite.svg檔案
第三步：應用
我們來看下生成檔案的原始碼：
再來看看瀏覽器裡頁面的效果~~~
到這裡svg sprite 圖示就已經完成了。
相容性：
對於ie8以下，我們可以新增一個標籤，使用css sprite：
為避免其他瀏覽器載入，可以加上條件註釋。
這樣就完美啦~