為什么要用SVG？

SVG是什么？

SVG是一種 可縮放矢量圖形 （英語：Scalable Vector Graphics，SVG）是基于可擴(kuò)展標(biāo)記語言（XML），用于描述二維矢量圖形的圖形格式。由W3C制定，是一個開放標(biāo)準(zhǔn)。
簡單的理解它是圖形的另一種格式例如它和常見的圖片格式.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目前推薦的標(biāo)準(zhǔn)

• W3C目前仍正在研究制定SVG 2

他在2001年就已經(jīng)被加入到W3C的標(biāo)準(zhǔn)中去了，歷時這么久終于到了該翻身的時候了。

它和傳統(tǒng)圖片格式有什么不同？

1.兼容現(xiàn)有圖片能力前提還支持矢量

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

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

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

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

與icon font對比

1.渲染方式不同

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

2.icon font只能支持單色

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

3.icon font可讀性不好

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

SVG的制作成本與維護(hù)成本

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

在維護(hù)性方面：做成SVG對設(shè)計師之前的工作量也有一定的提升，過去他們同一個圖不同尺寸在PS輸出都需要調(diào)整一次圖形，因?yàn)槿绻苯拥缺壤s放圖形尺寸，會出現(xiàn)圖片有鋸齒。但是用SVG以后，不同尺寸的控制都有前端同學(xué)直接調(diào)整SVG寬高參數(shù)就能實(shí)現(xiàn)不同尺寸切換，且不會有鋸齒。

SVG的性能測試

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

1.svg與icon font性能對比

1、結(jié)果svg整體是的  Rendering項(xiàng)基本上是碾壓了icon font ，數(shù)據(jù)如下：

頁面圖標(biāo)數(shù)量：491個

上圖SVG案例中我用了兩種不同引用方式，一種是在頁面直接inline svg方式插入的方法和用svg sprite合并后引用圖標(biāo)的兩種，結(jié)果顯示svg sprite的性能是高的。

2、大批量的測試結(jié)果SVG性能已經(jīng)比較有保證了，但實(shí)際項(xiàng)目中一個頁面不可能會存在這么多圖標(biāo)，我們按正常頁面出現(xiàn)圖標(biāo)10-30個這個區(qū)間， _ 取15個圖標(biāo)為中間值 在進(jìn)行一次測試看看，結(jié)果如何：
頁面圖標(biāo)數(shù)量：15個

Rendering 的渲染結(jié)果和之前差不多，icon font所用時間依舊比svg icon要多很多，但是inline svg和svg sprite兩種不同用法之間的差異卻變得非常小，幾乎 Rendering 的時間是差不多的。

2.svg sprites與png sprites性能對比

這個測試通過將svg sprites生成對應(yīng)的1倍圖png sprites來進(jìn)行測試，圖標(biāo)在頁面的實(shí)際大小是相等的。

測試圖標(biāo)數(shù)量：491個

文件大小上面svg sprites大了png sprites將近一倍， Rendering  也比圖片要長很多，但最終兩者之間綜合所消耗時間差不多

測試圖標(biāo)數(shù)量：15個

文件大小svg sprites與png sprites差不多， Rendering 也比圖片要長很多，但最終兩者之間綜合所消耗時間差不多

##SVG動畫
SVG還有一項(xiàng)動畫的能力，目前在許多H5中的有趣動畫很多都是用SVG做的。

兼容性

關(guān)于兼容性，在咱祖國一直是一個比較傷感的話題，不過從IE9開始已經(jīng)開始兼容SVG了，安卓3.X開始局部支持。

##總結(jié)
通過上面所述，SVG在既能滿足現(xiàn)有圖片的功能的前提下，又是矢量圖，在可訪問性上面也非常不錯，并且有利于SEO和無障礙，在性能和維護(hù)性方面也比icon font要出色許多，總之大家可以根據(jù)項(xiàng)目實(shí)際情況去嘗試使用。

本文題目：為什么要用SVG？
轉(zhuǎn)載來源：http://www.muchs.cn/news/46177.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、服務(wù)器托管、動態(tài)網(wǎng)站、虛擬主機(jī)、網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)