以下為內容摘抄和轉摘記錄：
為什么要用svg ?
SVG優勢
隨着高清屏幕的普及，相比使用png等位圖而言，使用SVG等矢量圖形是一種全新的設計方式。更重要的是相比位圖而言，SVG有着無可比擬的優勢。這里我總結一下SVG具體的一些優勢：
SVG是矢量圖形文件，可以隨意改變大小，而不影響圖標質量。
可以用CSS樣式來自由定義圖標顏色，比如顏色/尺寸等效果。
所有的SVG可以全部在一個文件中，節省HTTP請求 。
使用SMIL、CSS或者是javascript可以制作充滿靈性的交互動畫效果。
由於SVG也是一種XML節點的文件，所以可以使用gzip的方式把文件壓縮到很小。
使用方式：
使用方法 在web開發中，SVG主要有下面幾種使用方法： 使用img和object標簽直接引用svg。這種方法的缺點主要在於要求每個圖標都單獨保存成一個SVG文件，使用時也是單獨請求的，增加了HTTP請求。 Inline SVG，直接把SVG寫入 HTML 中，這種方法簡單直接，而且具有非常好的可調性。Inline SVG 作為HTML文檔的一部分，不需要單獨請求。臨時需要修改某個圖標的形狀也比較方便。但是Inline SVG使用上比較繁瑣，需要在頁面中插入一大塊SVG代碼不適合手寫，圖標復用起來也比較麻煩。 SVG Sprite。這里所說的Sprite技術，沒錯，類似於CSS中的Sprite技術。圖標圖形整合在一起，實際呈現的時候准確顯示特定圖標。其實基礎的SVG Sprite也只是將原來的位圖改成了SVG而已。 最后就是本文的主角啦。使用svg中的<symbol>元素來制作icon。
着重介紹的是使用svg中的<symbol>元素來制作icon
每個Symbol設置一個id作為引用時的名字。使用id引用這個SVG中的Icon有兩種方法。
第一種，將上述SVG作為body的第一個元素插入在HTML中， 此后，在需要顯示某個 Icon 的地方插入下面的代碼即可：
第二種是，是使用完整路徑引用Icon。 也就是：
自動化合並工具
問題來啦，如果碰到很多的圖標，難道我們都要手動去合並為一個SVG嗎？當然不用。
這里介紹一個專門用於處理SVG Symbols用的glup插件gulp-svg-symbols。
上哪找svg圖標去呢？ 這里推薦去icomoon.io 這個專門提供矢量圖標網站下載矢量圖像，重要的是它提供SVG格式的圖形下載。
那怎么使用呢它們呢？直接在html文件中使用，並且可以直接使用css來定義寬高、填充顏色等屬性。如下代碼所示：
作者：聆木 摘抄自： https://isux.tencent.com/16292.html