SVG圖標在移動端的應用

大家都知道圖標矢量化帶來的好處，在沒有增大圖標體積的情況解決了retina 屏幕上圖標不清晰的問題。

現在我們講講如何使用 SVG 圖標

在web開發中主要有以下幾種使用方法：

1. 使用img、object、embed 標簽直接引用svg。這種方法的缺點主要在于要求每個圖標都單獨保存成一個SVG文件，使用時也是單獨請求的，增加了HTTP請求。
2. Inline SVG，直接把SVG寫入 HTML 中，這種方法簡單直接，而且具有非常好的可調性。Inline SVG 作為HTML文檔的一部分，不需要單獨請求。臨時需要修改某個圖標的形狀也比較方便。但是Inline SVG使用上比較繁瑣，需要在頁面中插入一大塊SVG代碼不適合手寫，圖標復用起來也比較麻煩。
3. SVG Sprite。這里所說的Sprite技術，沒錯，類似于CSS中的Sprite技術。圖標圖形整合在一起，實際呈現的時候準確顯示特定圖標。其實基礎的SVG Sprite也只是將原來的位圖改成了SVG而已。
4. 使用 SVG 中的 symbol，use 元素 來制作圖標。這種方法的解決了上述三種方式帶來的弊端，少量的http情況，圖標可以被緩存 方便復用，整合和管理起來很非常簡單

SVG sysbol 就是接下來要講解的類容了

下面來看一段代碼示例：

每個symbol元素都包含了一個圖標 ，整合圖標的時候我們只需要像上面這段代碼一樣這個symbol元素里面‘塞入’單個SVG圖標的path路徑就可以了 ，拼合圖標就是如此簡單。

引用圖標同樣簡單 ，示例如下：

使用use 元素，直接‘use’相對應的symbol  ID 就能引用該圖標了

上面的示例 SVG symbol 是嵌入在html內的 。  SVG symbol 同樣可以 作為 SVG 文件保存 ，這種情況下 我們就需要 use  svg地址+id 名 來使用相應圖標：

注：如果如果 svg 放在 CDN靜態服務器的話，需要開啟Ajax跨域權限 。

本文作者：l, jian 轉載請注明來自： 攜程設計委員會