现在大家都越来越多地使用SVG来做网页上的图标了。SVG的好处毋庸置疑：不仅绘制方便，兼容性好，占用字节空间少，矢量图形可以无损缩放等等，还因为它本质上是xml，因此对于前端coder来说格外友好，当需要对它进行一些简单的修改时，用支持xml的代码编辑器就能轻松完成。
SVG太简单直观了，几乎无需学习就可以上手，这也恰恰使得包括本人在内的大部分使用者都不会去深究其用法。我在写作本文之前对SVG的用法仅限于两种方式：
1. 直接作为图片显示：
1
2
<img src="icon.svg" />
2. 作为元素的图片背景：
1
2
3
4
.icon {
background-image: url("icon.svg");
}