SVG 和字符图标
制作网站往往需要使用一些图标来提高用户体验,如果我们的是一些扁平化设计的图标,我们可以选择 SVG 或 图标字体来提高用户体验。
下面对这两种技术进行比较。
开发难度:
现在的在线工具非常强大,比如 iconmoon 的生成工具,可以根据自己的意向选择生成内联的 SVG 图标或字体图标。而我们的设计师只需要提供 SVG 格式图标文件。使用方式和 CSS sprites 有些相同。就难易程度来讲两者差不多。
精致度
SVG 是最直接的矢量图形了,在任何大小的情况下都能细腻的显示图标,尤其是在 retina 显示屏上,效果绝佳,这是众多开发者选择 SVG 的最主要一个原因。
字体图标被浏览器看做是字体,虽然和字体一样可以任意放大或是缩小,但会产生很明显的锯齿,这造成了很糟糕的视觉效果。
视觉效果
SVG 可以是多颜色的,SVG 的各个部分可以单独分开添加交互的动画效果,比如鼠标划过就打开的信封,或是鼠标点击就转动的手表。
字体图标是单一的整体,它是单色,添加起交互效果往往是针对整体的放大缩小,变色旋转等等。
实际使用的表现
SVG 要比字体图标大得多,现在流行的做法是将其放在页面当中以减少HTTP请求。
字体图标比较小,而且会缓存在页面当中。它适合在一些比较大的项目中使用,比如我们希望维护一个图标库,这些图标要满足大量不一样的需求。
兼容性
SVG 在这点上要逊于字体图标,它并不支持IE8,只能做优雅降级。
字体图标有着非常良好的兼容性,它兼容到IE6。
总结
字体图标稳重,SVG潇洒。
如果要兼容IE8及以前,使用字体图标保持兼容性。或是在一些项目非常大,图标很多的情况,用字体图标会更容易维护。
如果只需支持高级浏览器,而网站追求一些创新,高级的视觉及交互效果,这时用SVG会是更好的选择。
最后链接几个相关在线工具
SVG 和字符图标的更多相关文章
- SVG小图片格式显示(字符图标,可设置title属性)
1.HTML + Font 方式: 修改图标颜色只需修改字体颜色,修改图片大小只需修改字体大小. 关于字体图片,我们可以自己制作,也可以从网上下载 阿里巴巴矢量图库. 在线图标字体库.Icomoon. ...
- XE下 SVG格式的图标使用方法
下载一个SVG格式的图标,千图网,http://tool.58pic.com/tubiaobao/ 用txt文本打开SVG图标 拖一个PathLabel控件 在PathLabel控件的Data属性添加 ...
- m_Orchestrate learning system---十六、如何快速在一堆字符图标中找到所需
m_Orchestrate learning system---十六.如何快速在一堆字符图标中找到所需 一.总结 一句话总结:find查找字符 比如说找teacher feedback 的图标,可以多 ...
- 使用SVG symbols建立图标系统完整指南
从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont.现在,一种全新的图标使用方式开始流行了起来--SVG symbols图标. 工作原 ...
- 前端Unicode字符图标
前端Unicode字符图标 原文链接地址:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141225979.html
- svg图片做图标字体
https://icomoon.io 这个网站,把svg变图标
- 使用SVG symbols建立图标系统
在实现Web项目的图标系统时,SVG是一个不错的选择.虽然使用SVG创建图标系统有多种方式.在这篇文章中,我们只看其中一种:SVG symbols.这项技术基于两个元素的使用:<symbol&g ...
- css 字符图标浏览器自带
项目中用到的一些特殊字符和图标 html代码 <div class="cross"></div> css代码 .cross{ width: 20px; he ...
- SVG生成字体图标详解
随机推荐
- 函数nvl,nvl2,nullif,coalesce
NVL: Converts a null value to an actual valueNVL2:If expr1 is not null, NVL2 returns expr2. If expr1 ...
- JS如何判断IE和火狐与Chrome浏览器
var isIE=navigator.userAgent.toUpperCase().indexOf("MSIE")?true:false; 类似的可以写var isFirefox ...
- HTML\Script 去除关键字
以下是引用片段: ----- /**/ /// <summary> /// 去除HTML标记 /// </summary> /// <param name="N ...
- javaScript增加样式规则(新增样式)
<html> <head> <link rel="stylesheet" type="text/css" href="b ...
- struts2的工作机制
struts2的工作机制 原文:http://eoasis.iteye.com/blog/642586 概述 本章讲述Struts2的工作原理. 读者如果曾经学习过Struts1.x或者有过Strut ...
- java基础知识1
58.线程的基本概念.线程的基本状态以及状态之间的关系线程指在程序执行过程中,能够执行程序代码的一个执行单位,每个程序至少都有一个线程,也就是程序本身.Java中的线程有四种状态分别是:运行.就绪.挂 ...
- Autorelease Pool-自动释放池
Autorelease Pool是Objective-C中的内存管理方式之一,它与线程和NSAutorelease类有关.每一个线程都拥有自己的Autorelease Pool栈,这个栈底层是由双向链 ...
- 单机/伪分布式Hadoop2.4.1安装文档
转载自官方文档,最新版请见:http://hadoop.apache.org/docs/r2.4.1/hadoop-project-dist/hadoop-common/SingleCluster.h ...
- 【1】python核心编程 第三章
1.继续( \ ) 有两种例外情况一个语句不使用反斜线也可以跨行.在使用闭合操作符时,单一语句可以跨多行,例如:在含有小括号.中括号.花括号时可以多行书写.另外就是三引号包括下的字符串也可以跨行书写 ...
- 【剑指offer】面试题20:顺时针打印矩阵
题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...