在我們開始使用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格式文件一樣，控制圖片的大小，如下：
在線調試：https://www.gbtags.com/gb/debug/77d50934-592b-4b8a-b591-e7068c7e38ef.htm
SVG文件作為背景圖片使用
我們也可以使用SVG圖片作為背景圖片使用，如下：
<a href=「https://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圖片時，會有如下效果。
在線調試：https://www.gbtags.com/gb/debug/acfcf33e-db11-4b71-bdcb-d38e99fdcef3.htm
SVG相關工具
在線轉SVG工具：https://image.online-convert.com/convert-to-svg
微軟的SVG filter效果展示工具：https://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm
SVG減肥工具：https://www.mobilefish.com/services/base64/base64.php
總結
SVG是一個非常強大的圖片格式，可以幫助你高效的處理圖片，擁有比JPG或者PNG更靈活強大的圖形展示方式，相信如果加以時日，必定成為最流行的圖片處理方式！
via 極客標籤