几个图标格式的优缺点介绍

*为图标格式选择做参考

1.png

优点：

图标制作多样性，适合有特效的多彩色的图标，更换频率高的；

缺点：

位图缩放时容易失真；文件较大，影响加载速度；增加安装包体积；

2.svg

优点：

矢量图标，无论怎么修改尺寸都不会影响图片质量；

单个引用，比较灵活，可读性好，可直接被浏览器、搜索引擎SEO和无障碍读屏软件读取；

svg采用图形渲染清晰度高；节省请求时间；

svg可以做动画；

缺点：

svg代码较长，代码不美观；浏览器兼容性不太好；

3.icon-font

优点：

用几个引几个，不会影响加载速度；加载速度极快；

可以将自己做的svg转换成iconfont字体文件，更加灵活；

修改尺寸颜色更加灵活方便不占用设计资源；

浏览器兼容性较好；

缺点：

只支持单色或CSS的渐变色；

不同浏览器兼容方式略有不同可能会影响到字体大小和设计尺寸的误差；

制作字体图标需要花费更多时间；

SO

如何选择图标格式，给开发什么格式的比较合适？

作为设计师我们追求的是更加完美，我们更希望是能够像素级还原；

而开发工程师更多的是关注设备兼容性、重构成本、性能及维护成本等等。

由以上三种图标格式的优缺点我们可分析什么情况下选择使用哪种格式比较合适

在早期的web页面中大多都使用 png 格式的图标，但是随着Retina屏出现未经重构的网站就会出现图标失真模糊的情况，这样就直接拉低了整个web页面的质量；

那么当我们切给开发png格式的时候就不要忘记给@2x、@3x图；

为了避免这种情况，我们还可以采用svg或字体图标(Icon Font)；

svg是矢量格式图标；

iconfont是svg封装过的字体文件；

这两种格式在哪种分辨率下都能把图标完美显示；

在当今高清显示屏下已经在慢慢减少使用位图图标格式(但是也分情况)；

当需要使用彩色渐变色或者图标样式很多的情况下采用png是最方便处理的；

当图标为单色或几个简单的纯色可以采用svg格式会更清晰；

当一组或很多个单色小图标的情况下可以采用iconfont图标字体格式；将这一批图标生成字体供开发单个或多个引用。

如何将图标转换成字体文件？

1，先画图标

2，保存为svg格式

3，登录阿里巴巴图标库www.iconfont.cn

4，上传绘制的图标svg文件

5，在管理我的图标页面在图标上点击购物车小图标添加到库

6，点击菜单右上角购物车小图标在右侧弹窗中点击下载代码

7，在代码文件中可以看到生成的代码和字体文件

*将下载的文件全给到开发就好

希望对你有所帮助。