SVG圖標在移動端的應(yīng)用

SVG是基于XML的矢量圖像格式，用戶可靈活運用圖像進行搜索、索引、腳本以及壓縮。

在移動設(shè)備 retina 屏幕 經(jīng)常會遇到圖標不清晰的問題。

為了解決這個問題，我們有以下幾種方法

切一張 2倍甚至3倍大小的圖，然后用css 進行縮放，這樣雖然解決了圖標不清晰的問題，但是容量也成倍增加，導(dǎo)致頁面加載慢 ，hybird 包體積變大。

使用iconfont，無論你是什么分辨率，是否retina，無論你怎么放大，它可以保證圖標不會出現(xiàn)任何模糊 ，一份字體文件可以存放很多圖標，調(diào)用管理非常方便。因為是矢量所以容量非常小。可以用css 控制顏色陰影大小。只能是單色圖標。

使用SVG，和iconfont一樣是矢量圖標，具備iconfont優(yōu)點的同時，SVG圖標可以是多色圖標 ，體積比iconfont略大。

現(xiàn)在我們講講如何使用 SVG 圖標

在web開發(fā)中SVG主要有以下幾種使用方法：

使用img、object、embed 標簽直接引用svg。這種方法的缺點主要在于要求每個圖標都單獨保存成一個SVG文件，使用時也是單獨請求的，增加了HTTP請求。

Inline SVG，直接把SVG寫入 HTML 中，這種方法簡單直接，而且具有非常好的可調(diào)性。Inline SVG 作為HTML文檔的一部分，不需要單獨請求。臨時需要修改某個圖標的形狀也比較方便。但是Inline SVG使用上比較繁瑣，需要在頁面中插入一大塊SVG代碼不適合手寫，圖標復(fù)用起來也比較麻煩。

SVG Sprite。這里所說的Sprite技術(shù)，沒錯，類似于CSS中的Sprite技術(shù)。圖標圖形整合在一起，實際呈現(xiàn)的時候準確顯示特定圖標。其實基礎(chǔ)的SVG Sprite也只是將原來的位圖改成了SVG而已。

使用 SVG 中的 symbol，use 元素 來制作圖標。這種方法的解決了上述三種方式帶來的弊端，少量的http情況，圖標可以被緩存 方便復(fù)用，整合和管理起來很非常簡單

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

下面來看一段代碼示例：

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

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

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

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

注：如果如果 svg 放在 CDN靜態(tài)服務(wù)器的話，需要開啟Ajax跨域權(quán)限 。