SVG圖標在移動端的應用【轉】

http://ued.ctrip.com/blog/svg-icons-in-mobile-applications.html

在移動設備 retina 屏幕 常常會遇到圖標不清晰的問題。

爲了解決這個問題，咱們有如下幾種方法

1. 切一張 2倍甚至3倍大小的圖，而後用css 進行縮放，這樣雖然解決了圖標不清晰的問題，可是容量也成倍增長，致使頁面加載慢 ，hybird 包體積變大。
2. 使用iconfont，不管你是什麼分辨率，是否retina，不管你怎麼放大，它能夠保證圖標不會出現任何模糊 ，一份字體文件能夠存放不少圖標，調用管理很是方便。由於是矢量因此容量很是小。能夠用css 控制顏色陰影大小。只能是單色圖標。
3. 使用SVG，和iconfont同樣是矢量圖標，具有iconfont優勢的同時，SVG圖標能夠是多色圖標 ，體積比iconfont略大。

如今咱們講講如何使用 SVG 圖標

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

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路徑就能夠了 ，由於是xml因此整合圖標很是簡單。

引用圖標一樣簡單 ，示例以下：

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

上面的示例 SVG symbol 是嵌入在html內的 。  SVG symbol 一樣能夠 做爲 SVG 文件保存 ，這種狀況下 咱們就須要 use  svg地址+id 名 來使用相應圖標：

注：若是若是 svg 放在 CDN靜態服務器的話，須要開啓Ajax跨域權限 。