域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

在我們開(kāi)始使用SVG前，讓我們先了解一下 SVG，并且解釋一下為什么使用SVG。

SVG全稱是Scalable Vector Graphics，如果你使用過(guò)adobe Illustrator的話，相信你對(duì)這種適量格式的圖片并不陌生!

為什么使用SVG?

文件非常小

能夠無(wú)損失的縮放尺寸

在Retina顯示屏上效果超棒

能夠控制圖片樣式設(shè)計(jì)，例如互動(dòng)和過(guò)濾filter

瀏覽器支持

IE8及其更低版本不支持

Android 2.3及其更低版本不支持

其它瀏覽器都支持

如果你需要支持這些版本的瀏覽器的話，你可以使用Modernizr，如下：

if (!Modernizr.svg) { $(“.gblogo img”).attr(“src”， “images/logo.png”); }

或者使用如下更簡(jiǎn)單的代碼：

SVG文件作為一般圖片使用

你可以作為圖片來(lái)直接使用，如下：

你可以像控制JPG或者PNG格式文件一樣，控制圖片的大小，如下：

在線調(diào)試：

SVG文件作為背景圖片使用

我們也可以使用SVG圖片作為背景圖片使用，如下：

gbtags.com

CSS：

.logo { display： block; text-indent： -9999px; width： 100px; height： 100px;background： url(gblogo.svg); background-size： 100px 82px; }

使用行內(nèi)SVG

你可以直接將SVG代碼拷貝到body中，將會(huì)看到圖片，如下：

使用CSS控制SVG

你可以使用CSS來(lái)控制SVG文件，下面代碼將控制鼠標(biāo)懸浮時(shí)的圖片背景顏色：

以上代碼定義了一個(gè)logo的class，然后我們可以在CSS定義如下：

.logo:hover{ fill： #F08000; .... }

注意SVG中我們使用fill而不是background來(lái)定義背景色。

甚至可以使用filter來(lái)控制模糊度，如下：

.logo:hover{ fill： #F08000; filter： url(#logoFilter); }

當(dāng)你使用鼠標(biāo)hover圖片時(shí)，會(huì)有如下效果。

在線調(diào)試：

SVG相關(guān)工具

在線轉(zhuǎn)SVG工具：

微軟的SVG filter效果展示工具：

SVG減肥工具：

總結(jié)

SVG是一個(gè)非常強(qiáng)大的圖片格式，可以幫助你高效的處理圖片，擁有比JPG或者PNG更靈活強(qiáng)大的圖形展示方式，相信如果加以時(shí)日，必定成為最流行的圖片處理方式!

via 極客標(biāo)簽

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！