SVG可縮放矢量圖形（ScalableVector Graphics）。與我們常用的jpeg、png格式的位圖格式不同，這種格式的圖片在放大達(dá)到一定的倍數(shù)之后，就能看到一個(gè)個(gè)的小方塊，圖片整體在視覺上就模糊了，SVG格式的圖片無(wú)論放大縮小都可以保證清晰度不變。

那么SVG有哪些特點(diǎn)呢？

1.      基于SVG的圖像尺寸不限于固定的大小，可以升級(jí)到不同的現(xiàn)實(shí)分辨率。

2.      同一段SVG內(nèi)容可以被靈活的運(yùn)用在其它SVG圖像中。

3.      動(dòng)態(tài)交互性，利用dom的接口編程可實(shí)現(xiàn)響應(yīng)各種高亮，聲效，特效動(dòng)畫操作等，SVG定義了豐富的事件，可以滿足動(dòng)畫效果的需求。

4.      文本的獨(dú)立性，SVG圖像中的文字獨(dú)立于圖像，可以被獨(dú)立操作，以及被搜索引擎讀取。

5.      SVG具備1600萬(wàn)色彩的調(diào)色板，支持ICC標(biāo)準(zhǔn)，RGB,線性填充和遮罩。

6.      SVG是基于XML的純文本格式，通過(guò)XML傳遞數(shù)據(jù)，不受空間，設(shè)備，平臺(tái)的限制。

SVG的應(yīng)用

Svg提供了基本的圖形元素，如線段，矩形，橢圓，折線等通過(guò)路徑元素表現(xiàn)出來(lái)，基于坐標(biāo)系統(tǒng)進(jìn)行平移，伸縮，旋轉(zhuǎn)等變化，通過(guò)色彩填充及濾鏡對(duì)圖片進(jìn)行加工。并使用svg特有的動(dòng)畫標(biāo)簽實(shí)現(xiàn)動(dòng)畫效果。

實(shí)例介紹

代碼圖片效果：

圖片

上面這段代碼的意思就是定義一個(gè)svg畫布寬高為100%，畫一個(gè)一定規(guī)格的橢圓，由橢圓中心點(diǎn)開始一個(gè)放射性的漸變，并進(jìn)行圖片透明度的處理。

Svg圖片除了用代碼的形式進(jìn)行編輯外，還可以使用繪圖工具Adobe Illustrator 作圖。因?yàn)槠淝逦仍诜糯罂s小的情況下可以自適應(yīng)，所以特別適合做響應(yīng)式的配圖，其動(dòng)畫效果也很好的滿足了游戲開發(fā)的需求。