日期：2013-3-25 來源：GBin1.com
在我們開始使用SVG前，讓我們先了解一下 SVG，並且解釋一下為什么使用SVG。
SVG全稱是Scalable Vector Graphics，如果你使用過adobe Illustrator的話，相信你對這種適量格式的圖片並不陌生！
為什么使用SVG？
- 文件非常小
- 能夠無損失的縮放尺寸
- 在Retina顯示屏上效果超棒
- 能夠控制圖片樣式設計，例如互動和過濾filter
瀏覽器支持
- IE8及其更低版本不支持
- Android 2.3及其更低版本不支持
- 其它瀏覽器都支持
如果你需要支持這些版本的瀏覽器的話，你可以使用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" alt="gbtags logo">
你可以像控制JPG或者PNG格式文件一樣，控制圖片的大小，如下：
在線調試：http://www.gbtags.com/gb/debug/77d50934-592b-4b8a-b591-e7068c7e38ef.htm
SVG文件作為背景圖片使用
我們也可以使用SVG圖片作為背景圖片使用，如下：
<a href="http://www.gbtags.com" class="logo"> gbtags.com </a> CSS： .logo { display: block; text-indent: -9999px; width: 100px; height: 100px; background: url(gblogo.svg); background-size: 100px 82px; }
使用行內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: #F08000;
...
}
注意SVG中我們使用fill而不是background來定義背景色。
甚至可以使用filter來控制模糊度，如下：
.logo:hover{
fill: #F08000;
filter: url(#logoFilter);
}
當你使用鼠標hover圖片時，會有如下效果。
在線調試：http://www.gbtags.com/gb/debug/acfcf33e-db11-4b71-bdcb-d38e99fdcef3.htm
SVG相關工具
- 在線轉SVG工具：http://image.online-convert.com/convert-to-svg
- 微軟的SVG filter效果展示工具：http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm
- SVG減肥工具：http://www.mobilefish.com/services/base64/base64.php
總結
SVG是一個非常強大的圖片格式，可以幫助你高效的處理圖片，擁有比JPG或者PNG更靈活強大的圖形展示方式，相信如果加以時日，必定成為最流行的圖片處理方式！
via 極客標簽