幾個圖示格式的優缺點介紹
*為圖示格式選擇做參考
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，在程式碼檔案中可以看到生成的程式碼和字型檔案
*將下載的檔案全給到開發就好
希望對你有所幫助。