今天看了使用icomoon來將svg轉換成圖標字體，本來是不會使用別人給的svg，也不清楚具體的好處是什么，查了svg以后，越來越懵，svg挺好的為什么要轉成圖標字體呢。
一、SVG介紹
SVG 是一種基於 XML 語法的圖像格式，全稱是可縮放矢量圖（Scalable Vector Graphics）。其他圖像格式都是基於像素處理的，SVG 則是屬於對圖像的形狀描述，所以它本質上是文本文件，體積較小，且不管放大多少倍都不會失真。
SVG 文件可以直接插入網頁，成為 DOM 的一部分，然后用 JavaScript 和 CSS 進行操作。SVG 代碼也可以寫在一個獨立文件中，然后用<img>、<object>、<embed>、<iframe>等標簽插入網頁。CSS 也可以使用 SVG 文件。SVG 文件還可以轉為 BASE64 編碼，然后作為 Data URI 寫入網頁。
與其他圖像格式相比，使用 SVG 的優勢在於：
- SVG 可被非常多的工具讀取和修改（比如記事本）
- SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
- SVG 是可伸縮的
- SVG 圖像可在任何的分辨率下被高質量地打印
- SVG 可在圖像質量不下降的情況下被放大
- SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
- SVG 可以與 Java 技術一起運行
- SVG 是開放的標准
- SVG 文件是純粹的 XML
二、疑惑：SVG和字體圖標的區別是什么？為什么要轉換使用？
SVG和字體圖標都是矢量化圖形
SVG是基於可擴展標記語言（XML），用於描述二維矢量圖形的圖形格式。SVG由W3C制定，是一個開放標准。簡單的理解它是圖形的另一種格式例如它和常見的圖片格式.png、.jpg、.gif等是一類。
字體圖標采用的是字體渲染，利用字體工具把我們平時 Web 上用的圖形圖標轉換成 web fonts，就成了字體圖標，它可以借助 CSS 的 @font-face 嵌入到網頁里，用以顯示字體圖標。它天生具有「分辨率無關」的特性，在任何分辨率和PPI下面，都可以做到完美縮放，不會像傳統位圖， 如：png，jpeg，放大后有鋸齒或模糊現象。
使用字體圖標的好處：
-
文件小：相比圖片幾十幾百KB的容量，字體圖標幾乎是羽翼級輕量;
-
加載性能好：因為圖標都被打包進一套字體內，http request（http請求） 減少。這如同我們常用的 css sprites（精靈圖片） 技術。用幾個引幾個，不會影響加載速度;
-
支持CSS樣式：和普通字體一樣，你可以利用CSS來定義大小、顏色、陰影、hover狀態、透明度、漸變等等…
-
兼容性好：iconfont 起源很早，別說主流瀏覽器，連IE6/7都能良好支持。除了一些老的移動端瀏覽器，如Android 2.1以下的初代瀏覽器，Opera mini 這類自限型瀏覽器。
三、SVG如何轉換字體圖標？
使用icomoon完成svg轉字體圖標，icomoon 可以將.svg結尾的文件生成字體圖標, 字體圖標放大縮小的時候不會失真
1.首先進入IcoMoon的首頁 https://icomoon.io/，找到右上角的icomoon App，點擊進入
2.點擊選擇自己的svg文件，將其導入，並選擇自己要下載的圖標
下載字體圖標文件。下載成功了，使用起來也比較簡單。