SVG：使用XML格式定義圖像的可縮放矢量圖形(Scalable Vector Graphics)。
優點就不多說了，下面看看怎么將多個svg圖形集成到一個svg圖形上。
如果使用bootstrap框架來開發前端頁面的話，會發現字體圖標glyphicon很好用，可以用<span class="glyphicon glyphicon-search"><span>的格式來隨時調用icon，但是bootstrap的圖標很少，往往很多常見圖標里面沒有。那么我們就想到了專門和bootstrap搭配使用的圖標庫Font Awesome ，這個圖標庫里面有很多圖標，能滿足基本需求，但是如果我們想個性化定制圖標呢？比如說到目前為止（2016/07/28）最新的Font Awesome 4.6.3，我想找個QQ空間的圖標，里面沒有，想找新浪微博的圖標，里面只有一個很丑的圖標，怎么辦呢？
最簡單的方法，首先到阿里巴巴矢量圖標庫 http://www.iconfont.cn/ 去下載svg格式的圖形。搜qzone，選擇其中一個，點擊SVG下載：
同樣下載一個新浪微博的svg圖形。
然后用編輯器打開圖形，本文采用的是brackets編輯器，會看到如下代碼：
我們新建一個名為 weidulove.svg 的圖形文件，打開，在里面添加這樣的代碼：
<svg xmlns="http://www.w3.org/2000/svg" display="none">
<symbol id="lyf-qzone" viewBox="0 0 32 32">
</symbol>
</svg>
然后將紅線內的代碼粘到<symbol></symbol>中間，或者你也可以僅粘貼綠線里的代碼：
微博圖標是同樣的做法，把id改成di="lyf-weibo"就行了，注意viewBox里面的大小是根據你下載的圖形大小決定的。最終的結果是這樣：
在HTML頁面的引用是這樣的：
注意，如果你想自定義icon的顏色，就需要將最初的 fill="#272636" 刪除，然后才能在css里運用 fill：red；進行顏色填充。
效果圖如下：
-------------------------------------------------------------- 傻不拉幾分割線 ----------------------------------------------------------
如果我們想要的圖標，在網上下不到svg格式的怎么辦呢？可以這么辦，首先下一個叫做 Inkscape 的軟件，打開軟件，文件》打開，選擇一個圖形，然后什么都別做，直接保存為svg格式。接着，文件》導入，導入剛才保存的svg格式文件，然后路徑》提取位圖輪廓：
然后保存。
用編輯器打開最后保存的文件，看到一大串代碼，這時候我們只需要將代碼粘到一個新的<symbol></symbol>中間就行了，記得要在<symbol>里寫上id和viewBox：
例如：<symbol id="lyf-weidulove" viewBox="0 0 618 618"></symbol>。
到這里，一個最簡單的集成svg就做好了。