SVG 和字符圖標

製做網站每每須要使用一些圖標來提升用戶體驗，若是咱們的是一些扁平化設計的圖標，咱們能夠選擇 SVG 或 圖標字體來提升用戶體驗。

下面對這兩種技術進行比較。

 

開發難度：

如今的在線工具很是強大，好比 iconmoon 的生成工具，能夠根據本身的意向選擇生成內聯的 SVG 圖標或字體圖標。而咱們的設計師只須要提供 SVG 格式圖標文件。使用方式和 CSS sprites 有些相同。就難易程度來說二者差很少。

 

精緻度

SVG 是最直接的矢量圖形了，在任何大小的狀況下都能細膩的顯示圖標，尤爲是在 retina 顯示屏上，效果絕佳，這是衆多開發者選擇 SVG 的最主要一個緣由。

字體圖標被瀏覽器看作是字體，雖然和字體同樣能夠任意放大或是縮小，但會產生很明顯的鋸齒，這形成了很糟糕的視覺效果。

 

視覺效果

SVG 能夠是多顏色的，SVG 的各個部分能夠單獨分開添加交互的動畫效果，好比鼠標劃過就打開的信封，或是鼠標點擊就轉動的手錶。

字體圖標是單一的總體，它是單色，添加起交互效果每每是針對總體的放大縮小，變色旋轉等等。

 

實際使用的表現

SVG 要比字體圖標大得多，如今流行的作法是將其放在頁面當中以減小HTTP請求。

字體圖標比較小，並且會緩存在頁面當中。它適合在一些比較大的項目中使用，好比咱們但願維護一個圖標庫，這些圖標要知足大量不同的需求。

 

兼容性

SVG 在這點上要遜於字體圖標，它並不支持IE8，只能作優雅降級。

字體圖標有着很是良好的兼容性，它兼容到IE6。

 

總結

字體圖標穩重，SVG瀟灑。

若是要兼容IE8及之前，使用字體圖標保持兼容性。或是在一些項目很是大，圖標不少的狀況，用字體圖標會更容易維護。

若是隻需支持高級瀏覽器，而網站追求一些創新，高級的視覺及交互效果，這時用SVG會是更好的選擇。

 

最後連接幾個相關在線工具

阿里icon font字庫

iconmoon 

Font-Awesome