設計完圖標如何選擇圖標格式給到開發？

幾個圖標格式的優缺點介紹

*爲圖標格式選擇作參考

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，在代碼文件中能夠看到生成的代碼和字體文件

*將下載的文件全給到開發就好

但願對你有所幫助。