SVG 和字符图标

制作网站往往需要使用一些图标来提高用户体验，如果我们的是一些扁平化设计的图标，我们可以选择 SVG 或 图标字体来提高用户体验。

下面对这两种技术进行比较。

 

开发难度：

现在的在线工具非常强大，比如 iconmoon 的生成工具，可以根据自己的意向选择生成内联的 SVG 图标或字体图标。而我们的设计师只需要提供 SVG 格式图标文件。使用方式和 CSS sprites 有些相同。就难易程度来讲两者差不多。

 

精致度

SVG 是最直接的矢量图形了，在任何大小的情况下都能细腻的显示图标，尤其是在 retina 显示屏上，效果绝佳，这是众多开发者选择 SVG 的最主要一个原因。

字体图标被浏览器看做是字体，虽然和字体一样可以任意放大或是缩小，但会产生很明显的锯齿，这造成了很糟糕的视觉效果。

 

视觉效果

SVG 可以是多颜色的，SVG 的各个部分可以单独分开添加交互的动画效果，比如鼠标划过就打开的信封，或是鼠标点击就转动的手表。

字体图标是单一的整体，它是单色，添加起交互效果往往是针对整体的放大缩小，变色旋转等等。

 

实际使用的表现

SVG 要比字体图标大得多，现在流行的做法是将其放在页面当中以减少HTTP请求。

字体图标比较小，而且会缓存在页面当中。它适合在一些比较大的项目中使用，比如我们希望维护一个图标库，这些图标要满足大量不一样的需求。

 

兼容性

SVG 在这点上要逊于字体图标，它并不支持IE8，只能做优雅降级。

字体图标有着非常良好的兼容性，它兼容到IE6。

 

总结

字体图标稳重，SVG潇洒。

如果要兼容IE8及以前，使用字体图标保持兼容性。或是在一些项目非常大，图标很多的情况，用字体图标会更容易维护。

如果只需支持高级浏览器，而网站追求一些创新，高级的视觉及交互效果，这时用SVG会是更好的选择。

 

最后链接几个相关在线工具

阿里icon font字库

iconmoon 

Font-Awesome