SVG轉字體圖標
一. 問題？
- SVG和字體圖標的區別是什么？為什么要轉換使用？
- SVG如何轉換字體圖標？
- 轉換過程中遇到的問題有哪些？
二. 解答
SVG和字體圖標的區別以及轉換字體圖標的好處
SVG和字體圖標都是矢量化圖形
SVG（英語：Scalable Vector Graphics，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如何轉換ICON
首先打開ai格式的圖，選中要操作的圖層，進行切圖並保存svg格式，然后打開icomoon在線轉字體圖標（參考icomoon文檔）
1. AI轉SVG
1.1 打開AI
1.2 打開需要切圖的圖片
1.3 找到需要切圖的圖層
1.4 Ctrl+C復制第三步選中的圖層
1.5 Ctrl+N新建文檔
1.6 Ctrl+V粘貼選中圖層，如下圖所示
1.7選擇畫布工具，調整畫板大小(Alt+鼠標滾動調整畫布以精確選擇)
1.8 存儲上一步粘貼的圖層
存儲svg格式到本地新建的文件夾
1.9 切圖完成，在本地文件查看svg格式的圖片
1.10 查看svg圖片是否生成
2. SVG轉ICON
使用icomoon完成svg轉字體圖標,借助在線生成工具https://icomoon.io/app/#/select點此鏈接進入
2.1 進入在線生成工具主頁面
2.2 新建圖集
2.3 添加.svg圖片（可以使用現成的，也可以使用自定義的）
使用現成的--點擊頁面Import Icons...
使用自定義的--直接拖拽進圖集即可添加
2.4 生成字體文件
（1）選擇好要生成的圖標（自由選擇）
（2）點擊底部的："Generate Font"
2.5 可以自由命名
2.6 修改完成后，點擊download生成Font
2.7 下載壓縮文件
2.8 運用：將fonts文件夾全部內容和style.css文件放到相應的項目中。
2.9 根據css文件下面生成的class類的名稱添加到html對應的節點上即可添加字體。
也可以根據實際情況設置color改變其顏色。
三.轉換過程中遇到的問題有哪些
- svg圖標里面包含文字的時候不能正常轉換，轉換出來的ICON無法顯示文字，如下圖1所示：
解決辦法：打開AI，選中字體部分，文字--創建輪廓--保存最新svg，然后重新用icomoon在線轉字體圖標...
- SVG到ICOMOON創建多個路徑，如下圖所示:
2.1 可以這樣使用
<span class="icon-unknown-img">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</span>
顯示出來的結果如下圖所示
2.2 正常組合圖標使用解決辦法
2.2-1 因為您的svg文件中有多個路徑，您需要在外部將它們合並在一起並再次導入
合並步驟:
- 打開AI--選中
- 轉到對象>路徑>輪廓化描邊
- 然后選擇全部
- 窗口>路徑查找器>合並
- 保存並再次在線生成icomoon
2.2-2 因為icomoon只支持單色，您需要刪除圖標顏色且保存最新的svg並再次導入
刪除顏色步驟:
打開選中的icomoon頁面，如下圖
點擊Generate SVG & More 到如下頁面
點擊圖片 到如下頁面
點擊箭頭所指位置刪除圖標顏色，然后下載svg（Download【SVG】），重新導入
2.2-3 本人解決svg顏色不一致的問題
- 用電腦所安裝的編輯器打開svg格式的圖標
- 手動修改不同的顏色，如下圖所示：
將.st0 .st1 .st2 .st2的fill全部手動修改為 #666
注：此辦法是最笨的辦法，不建議使用