如果你要在你的网站中创建一个图标系统，你可以有不少的选择。如果你希望使用图片来制作图标，可以使用CSS sprites(CSS雪碧)技术。如果你希望使用矢量图来作为图标(这是时下非常流行的做法)，你可以有两个选择：使用内联的SVG或使用字体图标。

下面让我们来对它们做一个完整的比较。

矢量图标

使用矢量图标有一个很大的好处：放大和缩小矢量图标不会丢失细节，发生变形等情况，在视网膜显示器(retina displays)中显示格外清晰，并且矢量文件的大小非常的小。

Icon Font

Inline SVG

浏览器会认为字体图标是一种字体，所以显示的图标是会有一些锯齿，并不是完全的平滑锐利。

完全的矢量图形，线条平滑锐利。

下图中展示了字体图标和SVG图标的一些细小差别，字体图标有时候不够清晰。

CSS控制

Icon Font

Inline SVG

你可以通过font-size来控制字体图标的大小。还可以使用color来改变颜色，还可以使用CSS来为它添加阴影和使它旋转等等。

SVG图标可以实现CSS对字体图标控制的全部功能。并且可以表现得更好，因为你可以控制整个SVG图标得某一个部分，你还可以使用SVG独有的CSS控制，如stroke属性等。

在CSS控制方面SVG图标的最大优势是可以在同一个图标渲染出多种颜色。

定位

Icon Font

Inline SVG

字体图标的定位较难控制。字体图标都是通过伪元素来插入页面，它依赖于line-height、vertical-align、letter-spacing、word-spacing等属性。

SVG图标只是靠它的尺寸大小来定位。

下面的两张图展示了字体图标和SVG图标的定位方式：

某些奇怪的问题

Icon Font

Inline SVG

在调用字体图标的时候有可能会失败：在跨域调用字体图标的时候，没有在页面的header中写上正确的CORS属性的时候，Firefox浏览器会显示不正确；还有其它原因导致的无法显示：网络问题、服务器问题等；在使用@font-face的时候，Chrome浏览器会有一些bug；windows phone在使用IE9时不支持@font-face。

SVG图标可以正确的在页面中显示。如果浏览器支持SVG，就可以正确的显示它。

语法

Icon Font

Inline SVG

使用字体图标必须通过一个空的或元素来实现。这在语义上给人的感觉不是十分的友好。

SVG图标就是一幅图片。标签能够正确表达出这就是一幅矢量图片。

易用性

Icon Font

Inline SVG

如果使用一个创建好的字体图标库(如Font Awesome)显得有点冗余，你使用到的图标只是很少很少的一部分。如果你要创建自己的字体图标库也不是一件十分容易的事情。创建自己的字体图标可以通过Pictos Server或IcoMoon来完成。

SVG图标使用非常简单，你可以完全手动处理。也可以使用IcoMoon来创建。或者使用一些辅助工具。

浏览器支持

Icon Font

Inline SVG

广泛支持，包括IE6。

IE8以下以及Android 2.3以下的浏览器不支持SVG图标。

小结

使用字体图标和SVG图标的优劣，这一切都归结到浏览器的支持。如果你打算支持 IE 9+ / Android 3+ 以上的浏览器，那么使用SVG图标是最佳选择。如果你需要更加广泛的浏览器的支持，建议使用字体图标。虽然可以在使用SVG图标时给出回退方法，但是这是一笔庞大的开销：需要管理一组PNG图片，还要在页面中插入一个额外的元素来显示PNG图片，隐藏SVG元素等等。这样做显得十分笨重！