AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

灵活的Web图标-多终端下的图标⽅方案浅析 by Ryan@GitCafe

发布者 weber
发布于 1433837228679  浏览 3523 关键词 前端 
分享到

第1页

灵活的 Web 图标

多终端下的图标⽅方案浅析

Ryan @ D.G.Z (GitCafe) @ryaneof



第2页

主要的实现⽅方式



<img> <svg>



CSS Sprites Icon Font Pure CSS Icons



第3页

需要考虑的点



精确还原 兼容性



加载速度 维护成本



第4页

SVG Symbol &

CSS Sprites Fallback



第5页

Why SVG



第6页

位图 vs ⽮矢量图



第8页

万恶的视⺴⽹网膜屏幕 “⼀一夜之间,图⽚片全糊掉了,只有⽮矢量图坚挺着”



第9页

位图作为图标的缺陷

图⽚片体积⽆无法控制 2x, 3x 尺⼨寸只是⼀一个⼤大概的估算 不能完美适应所有的像素密度

放⼤大:颜⾊色近似选取,图⽚片模糊 缩⼩小:减少像素取样,资源浪费



第10页

设计师:图标本来就应该是⽮矢量的



第11页

⽮矢量图形

Pure CSS Icons Icon Font SVG



第12页

Pure CSS Icons

精确还原 √ 加载速度 √ 兼容性 X 维护成本 X



第13页

Icon Font

精确还原 √ 加载速度 √ 兼容性 √ 维护成本 X

似乎是⼀一个靠谱的⽅方法



第14页

Icon Font 定位问题

会受到浏览器对字体渲染的影响

line-height, vertical-align, letter-spacing, word-spacing, text-rendering 边缘不够锋利,伪元素盒模型不精确,各浏览器渲染的字重不同

会受到字符本⾝身设计的影响

留⽩白,字符本⾝身的⾼高度,宽度



第15页

Icon Font 加载问题 会受到⺴⽹网络状况影响,显⽰示 Fallback 字体



第16页

Icon Font 其他问题

Unicode 字符冲突 额外的⼯工作:字体编辑 颜⾊色单⼀一,交互效果有限 不完全的浏览器兼容性 困难的 fallback 检测



第17页

Icon Font



第18页

Scalable Vector Graphics



可缩放的



⽮矢量



图形



第19页

SVG

精确还原 √ 加载速度 √ 兼容性 X 维护成本 √



第20页

更易于编辑



第21页

兼容性



第22页

容易的 Fallback 检测



第23页

更多的交互可能

SVG Animation SVG + CSS SVG DOM + JavaScript

http://webpack.github.io



第24页

更… 灵活



第25页

通过图⽚片元素引⼊入 <img src=“oh-my-icon.svg” />



第26页

作为背景图⽚片引⼊入 (⽀支持 CSS Sprites)



第27页

内联 SVG 元素



第28页

SVG Symbol “概念上就是和 CSS Sprites 差不多的东⻄西”



第29页

.svg



第30页

.html with fallback



第31页

.css with fallback



第32页

span > svg > use



第33页

span > i



第34页

更灵活的 Fallback 机制 检测 USE 元素的 ownerSVGElement 属性



第35页

⼯工作流

设计师:思考怎样透过图标传递情感 设计师:画、画、画、改、改…… 设计师:把 SVG 放在某个⺫⽬目录 ⼯工程师:跑个脚本 ⼯工程师:复制、粘贴、好了



第36页

Everybody’s happy.



第37页

Q&A

https://github.com/ryaneof/svg-symbol-demo



第38页

感谢



支持文件格式:*.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。