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

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

开发难度:

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

精致度

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

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

视觉效果

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

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

实际使用的表现

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

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

兼容性

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

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

总结

字体图标稳重,SVG潇洒。

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

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

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

阿里icon font字库

iconmoon

Font-Awesome

SVG 和字符图标的更多相关文章

  1. SVG小图片格式显示(字符图标,可设置title属性)

    1.HTML + Font 方式: 修改图标颜色只需修改字体颜色,修改图片大小只需修改字体大小. 关于字体图片,我们可以自己制作,也可以从网上下载 阿里巴巴矢量图库. 在线图标字体库.Icomoon. ...

  2. XE下 SVG格式的图标使用方法

    下载一个SVG格式的图标,千图网,http://tool.58pic.com/tubiaobao/ 用txt文本打开SVG图标 拖一个PathLabel控件 在PathLabel控件的Data属性添加 ...

  3. m_Orchestrate learning system---十六、如何快速在一堆字符图标中找到所需

    m_Orchestrate learning system---十六.如何快速在一堆字符图标中找到所需 一.总结 一句话总结:find查找字符 比如说找teacher feedback 的图标,可以多 ...

  4. 使用SVG symbols建立图标系统完整指南

    从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont.现在,一种全新的图标使用方式开始流行了起来--SVG symbols图标. 工作原 ...

  5. 前端Unicode字符图标

    前端Unicode字符图标 原文链接地址:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141225979.html

  6. svg图片做图标字体

    https://icomoon.io 这个网站,把svg变图标

  7. 使用SVG symbols建立图标系统

    在实现Web项目的图标系统时,SVG是一个不错的选择.虽然使用SVG创建图标系统有多种方式.在这篇文章中,我们只看其中一种:SVG symbols.这项技术基于两个元素的使用:<symbol&g ...

  8. css 字符图标浏览器自带

    项目中用到的一些特殊字符和图标 html代码 <div class="cross"></div> css代码 .cross{ width: 20px; he ...

  9. SVG生成字体图标详解

随机推荐

  1. SQL常用分页

    top式 string sqltext = string.Format(" SELECT TOP {0} * FROM '表' WHERE ('字段' NOT IN (SELECT TOP ...

  2. ORA-01152错误解决方法(转)

    具体步骤如下: startup force; alter system set "_allow_resetlogs_corruption"=true scope=spfile; r ...

  3. COMException 依赖服务或组无法启动(0x8007042C)处理办法

    问题分析:这个问题主要原因是由于服务列表中的windows management instrumentation这个服务无法启动 问题解决办法: 点击屏幕左下角:开始-运行-输入regedit 打开注 ...

  4. poj2243 bfs

    O - 上一个题的加强版 Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:65536KB     6 ...

  5. poj1623 Squadtrees

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud 需要求出按题目要求建四叉树所需的结点个数,和压缩后的四叉树的结点个数(压缩即只要将 ...

  6. (原)C++中测试代码执行时间

    转载请注明出处(不过这个用法网上到处都是): http://www.cnblogs.com/darkknightzh/p/4987738.html LARGE_INTEGER nFreq, nBegi ...

  7. git rm

    git rm可以执行删除的条件(前提是要被删除的文件还没有从workspace tree中移除) git rm可以执行删除的条件:被删除文件在index当中的blob内容必须与HEAD commit指 ...

  8. Javascript经典实例 - 正则表达式

    1] 正则常用字符 正则表达式常用的特殊字符 字符 匹配 示例 ^ 匹配输入的开始 /^This/匹配 “This is ...” $ 匹配输入的结束 /end$/匹配“This is the end ...

  9. 加速ssh连接

    今天aws大姨妈了,也不知道是aws问题还是gfw的问题,反正我都已经问候了你们zzsbd!!! ping aws的丢包都是75%以上,这还玩个雕啊,果断去找加速的教程来看,但是发现cygwin下并没 ...

  10. python运维开发(二十三)---tornado框架

    内容目录: 路由系统 模板引擎 cookie 加密cookie 自定义api 自定义session 自定义form表单验证 异步非阻塞 web聊天室实例 路由系统 路由系统其实就是 url 和 类 的 ...