武林網(www.49028c.com)文章簡介：SVG全稱是Scalable Vector Graphics，如果你使用過adobe Illustrator的話，相信你對這種適量格式的圖片并不陌生！
在我們開始使用SVG前，讓我們先了解一下 SVG，并且解釋一下為什么使用SVG。
SVG全稱是Scalable Vector Graphics，如果你使用過adobe Illustrator的話，相信你對這種適量格式的圖片并不陌生！
為什么使用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更靈活強大的圖形展示方式，相信如果加以時日，必定成為最流行的圖片處理方式！
新聞熱點
疑難解答
