武林網(www.vevb.com)文章簡介：SVG全稱是Scalable Vector Graphics，如果你使用過adobe Illustrator的話，相信你對這種適量格式的圖片並不陌生！
在我們開始使用SVG前，讓我們先了解一下SVG，並且解釋一下為什麼使用SVG。
SVG全稱是Scalable Vector Graphics，如果你使用過adobeIllustrator的話，相信你對這種適量格式的圖片並不陌生！
為什麼使用SVG？瀏覽器支持如果你需要支持這些版本的瀏覽器的話，你可以使用Modernizr，如下：
if (!Modernizr.svg) {
$(.gblogo img).attr(src, images/logo.png);
}
或者使用如下更簡單的代碼：
<img src=gblogo.svg onerror=this.onerror=null; this.src=gblogo.png>
SVG文件作為一般圖片使用你可以作為圖片來直接使用，如下：
<img src=logo.svg href= class=logo>
csswang.com
</a>
css代碼:
.logo {
display:
text-indent:
width:
height:
background:
background-size:
}
使用行內SVG你可以直接將SVG代碼拷貝到body中，將會看到圖片，如下：
<body>
<!-- 將SVG代碼拷貝到此處，將會顯示圖片-->
</body>
使用CSS控制SVG你可以使用CSS來控制SVG文件，下面代碼將控制鼠標懸浮時的圖片背景顏色：
<g class=logo transform=translate(0.000000,500.000000) scale(0.100000,-0.100000)
fill=#000000 stroke=none>
以上代碼定義了一個logo的class，然後我們可以在CSS定義如下：
.logo:hover{
fill:
...
}
注意SVG中我們使用fill而不是background來定義背景色。
甚至可以使用filter來控制模糊度，如下：
.logo:hover{
fill:
filter:
}
當你使用鼠標hover圖片時，會有如下效果。
在線調試：
SVG相關工具總結SVG是一個非常強大的圖片格式，可以幫助你高效的處理圖片，擁有比JPG或者PNG更靈活強大的圖形展示方式，相信如果加以時日，必定成為最流行的圖片處理方式！