如何使用SVG大学来处理网页上的图片？我相信你对SVG有一些了解，在处理ICON图片方面有很大的优势。今天，我主要分享SVG如何应用它。如果你使用过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">
使用SVG文件作为背景图片
我们也可以用SVG图片作为背景图片使用如下：
<a href="http://www.jiangweishan.com" class="logo"> Web前端之家 </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图片时，会有以下效果。
在线调试：http://www.gbtags.com/gb/debug/acfcf33e-db1-4b71-bdcb-d38e9fdcef3.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更灵活、更强大的图片显示方式，我相信如果时间长了，它将成为最受欢迎的图片处理方式！
