摘要：在中使用很简单，但是也有一些需要知道的事情。兼容的方法在里面使用如果想要通过控制，但是又想避免内联的弊端，可以在里面使用。记得去掉换行它可以在上述的所有场景里面使用，除了内联。
原文地址: https://css-tricks.com/using-...原文作者: Chris Coyier
翻译作者: https://github.com/chenmf6
翻译出处：https://github.com/lightningm...
SVG是一种向量图的图片格式，即可伸缩向量图（Scalable Vector Graphics），可以在Adobe Illustrator里面生成。在Web中使用SVG很简单，但是也有一些需要知道的事情。
为什么用SVG压缩后文件体积小
可以无损伸缩到任意尺寸（除非尺寸特别小）
在retina屏幕上可以完美显示
设计可控，比如交互和滤镜
怎么生成SVG可以在Adobe Illustrator里设计并且得到SVG。下面是一个站在椭圆上的奇异鸟：
留意到画板刚好贴着设计主体的边缘，画布的大小在SVG里面的重要性和在PNG和JPG里面是一样的。
然后可以直接在Adobe Illustrator里面保存成SVG文件。
保存的时候，可以在duihua对话框里面选择SVG选项。完整的参考可以看SVG 介绍。这里选SVG 1.1就可以了。
当点击"OK"或者"SVG Code..."的时候，就会打开文本编辑器，显示SVG的编码。
然后就可以用特殊的SVG CSS来控制这些元素了。SVG元素由着特殊的CSS属性，比如它没有background-color，而是用fill，但是也可以使用一些其他的普通属性，比如:hover
CSS
.kiwi {
fill: #94d31b;
}
.kiwi:hover {
fill: #ace63c;
}
更厉害的是，SVG可以使用滤镜(filter)，比如模糊滤镜。比如在SVG代码里面可以加上一个滤镜：
SVG
然后可以在CSS里面使用这个滤镜
CSS
.ground:hover {
filter: url(#pictureFilter);
}
下面是一个完整的例子：
前往codepen查看
更多阅读：
SVG滤镜的更多应用
SVG CSS属性大全（针对Opera）
SVG滤镜效果演示（由Microsoft提供）
浏览器支持内联SVG的浏览器支持看这里，基本和前面的一样。兼容的方法：
HTML
CSS
.fallback {
display: none;
/* Make sure it"s the same size as the SVG takes up */
}
.no-svg .fallback {
background-image: url(logo.png);
}
在里面使用SVG
如果想要通过CSS控制SVG，但是又想避免内联SVG的弊端，可以在里面使用SVG。
HTML
同样可以使用Modernizr来兼容：
CSS
.no-svg .logo {
width: 200px;
height: 164px;
background-image: url(kiwi.png);
}
这种情况下，如果想要用CSS控制SVG，就不能用外部的样式或者文档里面的 ... 在 SVG里使用外部样式
可以在SVG文件开头的标签前面引入：
HTML
如果把这个放在HTML里面，页面会崩溃没法渲染，如果把这个放在或者background-image的SVG里面，页面不会崩溃，但是也不起作用。
还可以把SVG转换成Data URL，转换之后可能不止原来的文件大小，但是它很方便，因为不需要额外产生网络请求。
Mobilefish.com上面有一个base64在线转换器，可以转成base64编码，但是这种方式不太推荐。记得去掉换行：
它可以在上述的所有场景里面使用，除了内联SVG。
个人比较推荐这个在线转换器，因为转换之后可读性比较强。
用在里面
HTML
CSS里面
CSS
.logo {
background: url("data:image/svg+xml;base64,[data]");
}
里面
HTML
如果，SVG在base64编码之前有嵌套的