為什么要用SVG？

2016-09-06 分類：網站建設

SVG是什么？

SVG是一種可縮放矢量圖形（英語：Scalable Vector Graphics，SVG）是基于可擴展標記語言（XML），用于描述二維矢量圖形的圖形格式。由W3C制定，是一個開放標準。
簡單的理解它是圖形的另一種格式例如它和常見的圖片格式.png、.jpg、.gif等是一類。

SVG發展歷程

2001年9月4日，發布SVG 1.0
2003年1月4日，發布SVG 1.1
2003年1月14日，推出SVG移動子版本：SVG Tiny和SVG Basic
2008年12月22日，發布SVG Tiny 1.2
2011年8月16日，發布SVG 1.1（第2版），成為W3C目前推薦的標準
W3C目前仍正在研究制定SVG 2

他在2001年就已經被加入到W3C的標準中去了，歷時這么久終于到了該翻身的時候了。

它和傳統圖片格式有什么不同？

1.兼容現有圖片能力前提還支持矢量

SVG提供的功能集涵蓋了嵌套轉換、裁剪路徑、Alpha通道、濾鏡效果等能力，它還具備了傳統圖片沒有的矢量功能，在任何高清設備都很高清。點擊查看下面這張SVG圖形：

這樣一張高質量的矢量圖片它的質量僅僅只有：

2.可讀性好，有利于SEO與無障礙

由于SVG采用的是XML語法，圖形的里面的文本內容可以直接被瀏覽器，搜索引擎SEO和無障礙讀屏軟件讀取，具體用法如下代碼設置title與desc標簽即可：

與icon font對比

1.渲染方式不同

icon font采用的是字體渲染，icon font在一倍屏幕下渲染效果并不好，在細節部分鋸齒還是很明顯的，SVG上面我說過它是圖形所以在瀏覽器中使用的是圖形渲染，所以SVG卻沒有這種問題，請看下圖對比：

2.icon font只能支持單色

icon font做為字體無法支持多色圖形，這就對設計造成了許多限制，因此這也成為了icon font的一個瓶頸。

3.icon font可讀性不好

icon font主要在頁面用Unicode符號調用對應的圖標，這種方式不管是瀏覽器，搜索引擎和對無障礙方面的能力都沒有SVG好

SVG的制作成本與維護成本

目前制作SVG設計軟件有：Adobe Illustrator、Visio以及CorelDRAW等，用AI畫圖對設計師是否會產生額外成本，我還專門咨詢了組內幾個設計師：“用PS畫一個圖形和用AI畫一個圖形的所需時間是一樣”（來自我組峰哥，華D哥，登哥，丹哥原話），AI做好后直接導出成SVG格式給前端同學即可使用。相比制作字體包要步驟簡單許多。

在維護性方面：做成SVG對設計師之前的工作量也有一定的提升，過去他們同一個圖不同尺寸在PS輸出都需要調整一次圖形，因為如果直接等比例縮放圖形尺寸，會出現圖片有鋸齒。但是用SVG以后，不同尺寸的控制都有前端同學直接調整SVG寬高參數就能實現不同尺寸切換，且不會有鋸齒。

SVG的性能測試

性能應該是大家最關注的為題了，為了測試的可靠性，我在icomoon挑選了 __491個__ 免費ICON，分別生成了svg圖標和icon font在Chrome Timeline做了測試，測試內容分別對demo頁面491圖標的 __Loading、Rendering、Painting__ 這三個指標做了測試