多個SVG圖形集成到一個SVG圖形上

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就作好了。