使用icomoon把svg圖片生成字型圖示

居老師的狗子發表於2019-03-15
SVG

今天看了使用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，放大後有鋸齒或模糊現象。

使用字型圖示的好處：

  1. 檔案小：相比圖片幾十幾百KB的容量，字型圖示幾乎是羽翼級輕量;

  2. 載入效能好：因為圖示都被打包進一套字型內，http request（http請求） 減少。這如同我們常用的 css sprites（精靈圖片） 技術。用幾個引幾個，不會影響載入速度;

  3. 支援CSS樣式：和普通字型一樣，你可以利用CSS來定義大小、顏色、陰影、hover狀態、透明度、漸變等等…

  4. 相容性好：iconfont 起源很早，別說主流瀏覽器，連IE6/7都能良好支援。除了一些老的移動端瀏覽器，如Android 2.1以下的初代瀏覽器，Opera mini 這類自限型瀏覽器。

三、SVG如何轉換字型圖示？

使用icomoon完成svg轉字型圖示，icomoon 可以將.svg結尾的檔案生成字型圖示, 字型圖示放大縮小的時候不會失真

1.首先進入IcoMoon的首頁  https://icomoon.io/，找到右上角的icomoon App，點選進入

2.點選選擇自己的svg檔案，將其匯入，並選擇自己要下載的圖示

下載字型圖示檔案。下載成功了，使用起來也比較簡單。

 

相關文章