成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

為什么要用SVG?

2016-09-06    分類: 網(wǎng)站建設(shè)

SVG是什么?

SVG是一種 可縮放矢量圖形 (英語:Scalable Vector Graphics,SVG)是基于可擴(kuò)展標(biāo)記語言(XML),用于描述二維矢量圖形的圖形格式。由W3C制定,是一個(gè)開放標(biāo)準(zhǔn)。
簡(jiǎn)單的理解它是圖形的另一種格式例如它和常見的圖片格式.png、.jpg、.gif等是一類。

SVG發(fā)展歷程

  • 2001年9月4日,發(fā)布SVG 1.0

  • 2003年1月4日,發(fā)布SVG 1.1

  • 2003年1月14日,推出SVG移動(dòng)子版本: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)中去了,歷時(shí)這么久終于到了該翻身的時(shí)候了。

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

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

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

這樣一張高質(zhì)量的矢量圖片它的質(zhì)量?jī)H僅只有:

2

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

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

與icon font對(duì)比

1.渲染方式不同

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

2.icon font只能支持單色

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

3.icon font可讀性不好

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

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

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

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

SVG的性能測(cè)試

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

1.svg與icon font性能對(duì)比

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

頁面圖標(biāo)數(shù)量:491個(gè)

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

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


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

2.svg sprites與png sprites性能對(duì)比

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

測(cè)試圖標(biāo)數(shù)量:491個(gè)


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

測(cè)試圖標(biāo)數(shù)量:15個(gè)


文件大小svg sprites與png sprites差不多, Rendering 也比圖片要長(zhǎng)很多,但最終兩者之間綜合所消耗時(shí)間差不多

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

兼容性

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

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

文章標(biāo)題:為什么要用SVG?
本文來源:http://jinyejixie.com/news27/46177.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計(jì)公司、品牌網(wǎng)站設(shè)計(jì)、云服務(wù)器、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站收錄

廣告

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

成都seo排名網(wǎng)站優(yōu)化
平乐县| 灌南县| 闽侯县| 瑞安市| 香河县| 旬邑县| 绩溪县| 安岳县| 玛多县| 辽阳县| 尉氏县| 柳州市| 福贡县| 宁都县| 长宁区| 化德县| 吴桥县| 吉木乃县| 兰西县| 辛集市| 精河县| 县级市| 芒康县| 瓮安县| 全南县| 富平县| 稷山县| 绵竹市| 井陉县| 宿迁市| 南阳市| 伊金霍洛旗| 山西省| 揭阳市| 敦煌市| 寻乌县| 汉寿县| 纳雍县| 车险| 蒙城县| 天峨县|