SVG在既能滿足現(xiàn)有圖片的功能的前提下佑稠，又是矢量圖秒梅，在可訪問性上面也非常不錯，并且有利于SEO和無障礙舌胶，在性能和維護性方面也比icon font要出色許多捆蜀，總之大家可以根據項目實際情況去嘗試使用。
SVG是什么？
SVG是一種可縮放矢量圖形（英語：Scalable Vector Graphics辆它，SVG）是基于可擴展標記語言（XML）誊薄，用于描述二維矢量圖形的圖形格式。SVG由W3C制定娩井，是一個開放標準暇屋。
簡單的理解，它是圖形的另一種格式例如它和常見的圖片格式.png洞辣、.jpg咐刨、.gif等是一類。
SVG發(fā)展歷程
2001年9月4日扬霜，發(fā)布SVG 1.0
2003年1月4日定鸟，發(fā)布SVG 1.1
2003年1月14日，推出SVG移動子版本：SVG Tiny和SVG Basic
2008年12月22日著瓶，發(fā)布SVG Tiny 1.2
2011年8月16日联予，發(fā)布SVG 1.1（第2版），成為W3C目前推薦的標準
W3C目前仍正在研究制定SVG 2
他在2001年就已經被加入到W3C的標準中去了材原，歷時這么久終于到了該翻身的時候了沸久。
它和傳統(tǒng)圖片格式有什么不同？
1. 兼容現(xiàn)有圖片能力前提還支持矢量
SVG提供的功能集涵蓋了嵌套轉換余蟹、裁剪路徑卷胯、Alpha通道、濾鏡效果等能力威酒，它還具備了傳統(tǒng)圖片沒有的矢量功能窑睁，在任何高清設備都很高清。點擊查看下面這張SVG圖形：
這樣一張高質量的矢量圖片它的質量僅僅只有：
2. 可讀性好葵孤，有利于SEO與無障礙
由于SVG采用的是XML語法担钮，圖形的里面的文本內容可以直接被瀏覽器，搜索引擎SEO和無障礙讀屏軟件讀取尤仍，具體用法如下代碼設置title與desc標簽即可：
與icon font對比
1. 渲染方式不同
icon font采用的是字體渲染箫津，icon font在一倍屏幕下渲染效果并不好，在細節(jié)部分鋸齒還是很明顯的宰啦，SVG上面我說過它是圖形所以在瀏覽器中使用的是圖形渲染鲤嫡，所以SVG卻沒有這種問題，請看下圖對比：
2. icon font只能支持單色
icon font做為字體無法支持多色圖形绑莺，這就對設計造成了許多限制暖眼，因此這也成為了icon font的一個瓶頸。
3. ion font可讀性不好
icon font主要在頁面用Unicode符號調用對應的圖標纺裁，這種方式不管是瀏覽器诫肠，搜索引擎和對無障礙方面的能力都沒有SVG好
SVG的制作成本與維護成本
目前制作SVG設計軟件有：Adobe Illustrator司澎、Visio以及CorelDRAW等，用AI畫圖對設計師是否會產生額外成本栋豫，我還專門咨詢了組內幾個設計師：“用PS畫一個圖形和用AI畫一個圖形的所需時間是一樣”（來自我組峰哥挤安，華D哥，登哥丧鸯，丹哥原話）蛤铜，AI做好后直接導出成SVG格式給前端同學即可使用。相比制作字體包要步驟簡單許多丛肢。
在維護性方面：做成SVG對設計師之前的工作量也有一定的提升围肥，過去他們同一個圖不同尺寸在PS輸出都需要調整一次圖形，因為如果直接等比例縮放圖形尺寸蜂怎，會出現(xiàn)圖片有鋸齒穆刻。但是用SVG以后，不同尺寸的控制都有前端同學直接調整SVG寬高參數就能實現(xiàn)不同尺寸切換杠步，且不會有鋸齒氢伟。
SVG的性能測試
性能應該是大家最關注的為題了，為了測試的可靠性幽歼，我在icomoon挑選了 __491個__ 免費ICON朵锣，分別生成了svg圖標和icon font在Chrome Timeline做了測試，測試內容分別對demo頁面491圖標的 __Loading甸私、Rendering诚些、Painting__ 這三個指標做了測試
1. svg與ion font性能對比
（1）結果svg整體是的Rendering項基本上是碾壓了icon font，數據如下：
頁面圖標數量：491個
上圖SVG案例中我用了兩種不同引用方式颠蕴，一種是在頁面直接inline svg方式插入的方法和用svg sprite合并后引用圖標的兩種，結果顯示svg sprite的性能是最高的助析。
（2）大批量的測試結果SVG性能已經比較有保證了犀被，但實際項目中一個頁面不可能會存在這么多圖標，我們按正常頁面出現(xiàn)圖標10-30個這個區(qū)間外冀， _取15個圖標為中間值在進行一次測試看看寡键，結果如何：
頁面圖標數量：15個
Rendering的渲染結果和之前差不多，icon font所用時間依舊比svg icon要多很多雪隧，但是inline svg和svg sprite兩種不同用法之間的差異卻變得非常小西轩，幾乎Rendering的時間是差不多的。
2. svg sprites與png sprites性能對比
這個測試通過將svg sprites生成對應的1倍圖png sprites來進行測試脑沿，圖標在頁面的實際大小是相等的藕畔。
測試圖標數量：491個
文件大小上面svg sprites大了png sprites將近一倍，Rendering也比圖片要長很多庄拇，但最終兩者之間綜合所消耗時間差不多
測試圖標數量：15個
文件大小svg sprites與png sprites差不多注服，Rendering也比圖片要長很多韭邓，但最終兩者之間綜合所消耗時間差不多。
SVG動畫
SVG還有一項動畫的能力溶弟，目前在許多H5中的有趣動畫很多都是用SVG做的女淑。
兼容性
關于兼容性，在咱祖國一直是一個比較傷感的話題辜御，不過從IE9開始已經開始兼容SVG了鸭你，安卓3.X開始局部支持。
總結
通過上面所述擒权，SVG在既能滿足現(xiàn)有圖片的功能的前提下袱巨，又是矢量圖，在可訪問性上面也非常不錯菜拓，并且有利于SEO和無障礙瓣窄，在性能和維護性方面也比icon font要出色許多，總之大家可以根據項目實際情況去嘗試使用纳鼎。
下面介紹幾個國外已經全棧使用SVG的站點：
digitalocean
github
