213. 为何设计师不应该使用 png、jpg、svg 制作小图标

首发于我的博客：https://github.com/ly525/blog ，欢迎关注与讨论

场景

从一次聊天讲起，设计师同学问使用这些svg 来做icon是否可以？

还有就是有一些设计师同学在制作招聘岗位前面的 icon的时候（比如Android 工程师前面放一个Android 的小logo， Unity 工程师前面放一个Unity 图标），是使用 png 做的小图片

为什么不应该使用svg、png，小图标应该使用什么呢？

先说结论：尽量不用 svg、png 制作小图标，推荐使用字体图标。

1. 先和前端小哥沟通，看下他们框架中是否带了icon 这个组件，优先从他们的icon库挑选
2. 如果没有，可以从这里下载：http://www.iconfont.cn/
3. 使用svg 做icon 其实不是很好，因为如果前端需要调整样式的话，可能需要去改svg 的源码或者让设计师同学重新切图。对设计师也不好。
4. 如果前端使用iconfont 或者 icon库（这时候icon是使用字体画的），因此改变大小和颜色，对于工程师来说是一件非常简单的事情，只需要写 font-size: xxpx就好了
5. 还有一个就是：如果页面中小图标特别多，会影响页面的性能，因为页面一般一次同时只允许 6次网络网络请求，如果icon 特别多，就会占用网络请求，导致其他应该优先加载的资源没有加载（比如背景图，人物照片）
6. 字体图标就没有这个问题了，工程师同学会把要用的icon 一次性打包，只需要下载一次就O
7. 设计师只需要去icon font 或者 工程师使用的框架的 icon库找到对应icon，把名称发给工程师就OK了
8. 接下来就是工程师的事情了

项目里面什么场景更适合使用 svg、png 呢

svg 图片一般都是用来做 logo的吧，因为它是矢量图，缩放不失真，这个特别好。比如知乎和 Youtube 的Logo 都是使用 svg 来做的

扩展阅读

1. SVG vs Image, SVG vs Iconfont