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