设计完图标如何选择图标格式给到开发？

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

*为图标格式选择作参考

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，在代码文件中能够看到生成的代码和字体文件

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

但愿对你有所帮助。