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