SVG圖標(biāo)在移動(dòng)端的應(yīng)用

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

在移動(dòng)設(shè)備 retina 屏幕 經(jīng)常會(huì)遇到圖標(biāo)不清晰的問(wèn)題。

為了解決這個(gè)問(wèn)題，我們有以下幾種方法

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

使用iconfont，無(wú)論你是什么分辨率，是否retina，無(wú)論你怎么放大，它可以保證圖標(biāo)不會(huì)出現(xiàn)任何模糊 ，一份字體文件可以存放很多圖標(biāo)，調(diào)用管理非常方便。因?yàn)槭鞘噶克匀萘糠浅Ｐ??？梢杂胏ss 控制顏色陰影大小。只能是單色圖標(biāo)。

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

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

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

使用img、object、embed 標(biāo)簽直接引用svg。這種方法的缺點(diǎn)主要在于要求每個(gè)圖標(biāo)都單獨(dú)保存成一個(gè)SVG文件，使用時(shí)也是單獨(dú)請(qǐng)求的，增加了HTTP請(qǐng)求。

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

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

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

SVG sysbol 就是接下來(lái)要講解的類(lèi)容了

下面來(lái)看一段代碼示例：

每個(gè)symbol元素都包含了一個(gè)圖標(biāo) ，整合圖標(biāo)的時(shí)候我們只需要像上面這段代碼一樣這個(gè)symbol元素里面‘塞入’單個(gè)SVG圖標(biāo)的path路徑就可以了 ，因?yàn)槭莤ml所以整合圖標(biāo)非常簡(jiǎn)單。

引用圖標(biāo)同樣簡(jiǎn)單 ，示例如下：

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

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

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