网页设计中的高清图标解决方案

本文来自网易云社区

作者：马宝

一句话

1. iconfont：设计出SVG给前端或自己出字体图标使用，想怎么改怎么改
2. SVG：设计出SVG 拼好的雪碧图前端链接背景图用，想怎么调怎么调

3. PNG：设计出高清PNG（2x ／ 3x） 前端可用不可改，千万别让设计重画

两张表（横向对比表、浏览器兼容性表）

格式类型	颜色	应用场景	兼容性	渲染效果	维护成本
Iconfont	单色	icons	高	字体（抗锯齿）	小到中雨
SVG	多色	img／banner / icons	良好	矢量	毛毛雨
PNG	多色	img／banner / icons	高	位图	大到暴雨

单列SVG在浏览器中兼容性在项目中是可接受的范围（别管IE 678 好么？），其它两项都比SVG好

浏览器兼容性	Chrome	Edge	Firefox (Gecko)	IE	Opera	Safari
最低要求	1.0	(Yes)	1.5 (1.8)	9.0	8.0	3.0.4

移动端浏览器	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
最低要求	3.0	(Yes)	1.0 (1.8)	No support	(Yes)	3.0.4

• iconfont，单色，渲染机制有毛边，PC和mac 不同浏览器各有差异；16PX 以上的图标总体效果较好；建议@1x 出图，不清晰只能忍
• 单个svg使用，文件代码量太多，加载慢，耗性能；建议别管性能继续用，SVG看着是最舒服的

• PNG Sprite，不灵活；维护成本高，设计高清@2x 3x图，设计师切图太累；

网页中的应用关系

三角关系

理论上矢量优于位图，但对于渐变透明度、图层混合模式的支持；特殊的img／banner 的情景下，位图格式的视觉表现力强于矢量格式

1、最好用的iconfont优缺

优点

• 灵活性，改变图标的颜色，背景色，大小都非常简单
• 兼容性，兼容所有流行的浏览器，不仅h5可以使用iconfont，app也可以使用iconfont
• 扩展性，替换图标很方便，新增图标也非常简单，也不需要考虑图标合并的问题
• 高效性，iconfont有矢量特性，没有图片缩放的消耗高

在使用上字体文件和普通的静态资源一样，既可以外链也可以内链，并且字体文件也可以使用gzip压缩 在移动端上，可以只使用truetype类型，非常灵活小巧

缺点

• 渲染性，字体渲染取决于浏览器的支持程度，字体（抗锯齿）渲染机制问题，iconfont在大部分情况下是有所谓的毛边的
• 维护成本，视觉／前端 维护几百个字体图标也是一项巨大的体力活，字体图标的“增删改查”

2、不考虑兼容性（高清图标解决方案的不二选择） SVG

优点

• 灵活性，比字体图标美，可以拥有多种色彩，改变图标的颜色，背景色，大小
• 扩展性，存在于css sprite的形式替换图标很方便，新增图标也非常简单
• 高效性，只要设计师出SVG 方案即可，不需要字体图标转换
• 维护成本，低低低

缺点

• 兼容性，看上表 IE 678 ／ 别想了，问题出在 IE 8 和 Android 2.3-。可以使用 fallback 规则，但不完美。

总结

不要想着一稿走天下；符合业务场景的解决方案才是好方案；一套方案兼容全部场景，不现实这一切都取决于浏览器支持。如果你的项目只兼容到 IE9+/安卓3+，inline SVG几乎在所有方面都比 icon font 要好。如果您需要更广泛的浏览器兼容性，inline SVG 方案会带来很多麻烦，不建议尝试（文件需要一个 PNG 副本，需要插入额外的元素以显示降级后的 PNG 版本，此时隐藏对应 SVG 元素…）

本文来自网易云社区，经作者马宝授权发布

网易云免费体验馆，0成本体验20+款云产品！

更多网易研发、产品、运营经验分享请访问网易云社区。