首页 > 技术文章 > SVG 和字符图标

winderby 2015-03-25 16:21 原文

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

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

 

开发难度:

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

 

精致度

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

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

 

视觉效果

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

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

 

实际使用的表现

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

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

 

兼容性

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

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

 

总结

字体图标稳重,SVG潇洒。

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

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

 

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

阿里icon font字库

iconmoon 

Font-Awesome

推荐阅读