SVG vs Image, SVG vs Iconfont

kel 發布于2019-08-29 17:20 / 3765人閱讀

摘要：結論綠色部分表示比略勝一籌的地方，黃色部分表示有所欠缺的地方，灰綠色表示差不多。兼容性列表可以良好地支持多色及多色變化。以為例說明便捷使用。綜上結論選擇或許是一個不錯地選擇去替代的使用方式。

這可能是個別人寫過很多次的話題，但貌似由于兼容性的原因？圖標的顯示還是用著 Iconfont 或者 CSS Sprite 的形式？
希望通過自己新瓶裝舊酒的方式能重新引導一下問題。

SVG vs Image

比方說現在要做下圖這樣的視覺效果：

分析：可能需要三張圖片

鼠標移入時的背景圖

漸變色前景圖

鼠標移入時白色前景圖

獨立圖像

現在對比一下背景圖使用圖片與使用 SVG 格式的體積大小（做圖的時候拿錯顏色了，其他都一樣，能說明道理就行，見諒見諒）

可以看出，在肉眼感覺差異不大的情況下，WebP 格式體積最小，其次是 SVG，而 PNG 的體積過大。

這個 SVG 是在 Sketch 設計稿中導出來的，源碼包含了很多冗余無效的代碼，實際上是可以優化的，如下。

內部源碼

優化后

優化后大約可以減去 1K 個字符。當然這個需要內聯使用（Inline SVG）

CSS Sprite

使用 CSS Sprite 的方式可以減少 HTTP 請求，貌似還可以減少總體圖片體積。
這里用前景圖來對比一下，實際上背景圖和前景圖都可以合成一張 sprite。

可以看出，CSS Sprite 的體積比 Inline SVG + CSS 的方式大很多。

SVG vs Image 結論

綠色部分表示 SVG 比 Image 略勝一籌的地方，黃色部分表示有所欠缺的地方，灰綠色表示差不多。

1、如今已接近 2019 年了，對于 IE9 (2011年) 這種古老的瀏覽器都支持 SVG，所以再過多強調更低的兼容性也沒有什么意思。
2、Inline SVG 在瀏覽器應該是被渲染成 DOM 節點，所以關于 DOM 節點的性能優化都有必要注意；一個 SVG 圖像可能就會有很多路徑，即 DOM 節點，太多的 DOM 節點必然會影響瀏覽器的渲染性能及內存占用，而純位圖的渲染方式應該是沒有這方面的顧慮。（DOM 數量影響參考：Google WEB 開發者文檔）

綜上結論：

除開復雜圖像，選擇 Inline SVG 或者標簽的方式引入 SVG，會比使用 獨立圖像 或 組合圖像 (CSS sprite) 的方式更好。

SVG vs Iconfont 書寫對比

首先看下 Iconfont 與 SVG 圖標的使用方式，來源 阿里 Iconfont 平臺

很明顯 SVG Sprite 使用起來沒有 Iconfont 方便，需要寫 3 行代碼，而后者只需要寫 1 行。
當然上面的不是重點，重點是下面的換色與多色支持

換色與多色支持 換色

1、Iconfont 通過 CSS color 可以輕松更換圖標顏色。

2、而 SVG Sprite 比較麻煩，SVG Sprite 的代碼原理如下。

// 定義 symbol


// 使用

渲染出來的 DOM 結構是這樣的：

渲染在了 Shadow DOM 中（關于 Shadow DOM 的知識可以閱讀下這篇文章或這篇），
這樣的 DOM 元素樣式就具有了作用域，外面的 CSS 對 shadow-root 內的元素不會生效，
如果想要更換元素的顏色，需要使用 /deep/ 來穿透添加樣式，如下。

svg /deep/ path {
    fill: red;
}

當然，實際上在只需要在父級元素上添加 fill: red 這樣的 CSS 也能起到同樣的效果，里面的元素會繼承父級的樣式。

PS:  /deep/ 是 shadow DOM v0 的寫法，v1 已經把這樣的寫法拋棄了，實際上支持 v1 的 shadow DOM, 父級的樣式可以直接作用在 shadow-root 里面的元素。

多色支持

1、Iconfont 是不支持多色圖標的。

2、而 SVG Sprite 可以利用 CSS 變量或 shadow DOM 的方式支持多色圖標，shadow DOM 的方式上面已經說明，下面借用他人的文章解釋 CSS 變量實現多色，如下。

不過使用 CSS 變量或 shadow DOM 的方式兼容性都不好，

CSS 變量：Edge15+

shadow DOM：更差。兼容性列表

3、Inline SVG 可以良好地支持多色及多色變化。

漸變色支持

Iconfont 與 SVG Sprite 不支持漸變色。
Inline SVG 支持漸變色，并且兼容性良好。

渲染無抖動

使用 Iconfont，因為字體文件是異步加載的，所以在字體文件還沒有加載完畢之前，圖標位會留空，加載完畢后才會顯示出來，這個過程就會出現向下圖（來自 GitHub blog）這樣的抖動，而 SVG Sprite 或 Inline SVG 內聯加載則不會出現這樣的抖動。

當然，Iconfont 也可以內聯加載，不過需要轉換成 base64 同樣式表一起加載，轉換后的文件體積則會變為原來的 1.3 倍左右
這是由 base64 編碼決定的（編碼知識鏈接）。

字體轉換成 base64 的一個在線工具：https://transfonter.org/

體積較大

這個是 SVG 對比于 Iconfont 的一個不足之處，如下圖。

Inline SVG 與 SVG Sprite 體積差不多。

開發成本

三者的開發成本都差不多，不過 SVG 的兩種方式都需要前期做些配置，后期開發就會順手很多（單頁應用）。

以 vue + vue cli 為例說明 Inline SVG 便捷使用。

1、配置 Webpack loader:

{
  // 排除需要轉換成 Inline SVG 的目錄
  exclude: [resolve("src/svgicons")],
  test: /.(png|jpe?g|gif|svg)(?.*)?$/,
  loader: "url-loader",
  options: {
    limit: 1,
    name: utils.assetsPath("img/[name].[hash:7].[ext]")
  }
},
{
  // 指定特定的目錄用于 Inline SVG
  include: [resolve("src/svgicons")],
  test: /.svg$/,
  use: [
    // 讀取 SVG 源代碼
    { loader: "raw-loader" },
    // 精簡優化 SVG 源代碼
    {
      loader: "svgo-loader",
      options: {
        plugins: [
          { removeTitle: true },
          { removeViewBox: false },
          { removeDimensions: true },
          // ...其他參數
        ]
      }
    }
  ]
}

2、創建 SvgIcon.vue 組件:

3、使用：



或者

SVG vs Iconfont 結論

應該是 Inline SVG vs SVG Sprite vs Iconfont 的結論，如下圖。

綜上結論

選擇 Inline SVG 或許是一個不錯地選擇去替代 Iconfont 的使用方式。

擴展閱讀

GitHub 網站很早之前已經將圖標的展示方式由 Iconfont 轉成了 Inline SVG, 這一篇文章是他們的描述：
https://blog.github.com/2016-...

很早的一篇文章關于兩者的對比：https://css-tricks.com/icon-f...

最后

歡迎各抒己見談論一下對 SVG 和 Iconfont 的看法，優缺點，歡迎留言。

然后，本文同步發表于【凹凸實驗室博客】或微信公眾號，歡迎關注我們，么么噠。

GPU云服務器云服務器 SVG _svg svg過渡 svg圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114262.html

SVG vs Image, SVG vs Iconfont

摘要：結論綠色部分表示比略勝一籌的地方，黃色部分表示有所欠缺的地方，灰綠色表示差不多。兼容性列表可以良好地支持多色及多色變化。以為例說明便捷使用。綜上結論選擇或許是一個不錯地選擇去替代的使用方式。這可能是個別人寫過很多次的話題，但貌似由于兼容性的原因？圖標的顯示還是用著 Iconfont 或者 CSS Sprite 的形式？希望通過自己新瓶裝舊酒的方式能重新引導一下問題。 SVG vs I...

paulquei 2019-08-26 13:26 評論0 收藏0
iconfont實踐小結

摘要：所以實現小圖標時雪碧圖跟圖標字體會在一個網站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現請往下看開發流程就了解了。參考資料細談淺談圖標字體向下兼容優雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...

bitkylin 2019-08-29 13:00 評論0 收藏0
我的前端規范系列-圖標工程化[好用的圖標]

摘要：能快速修改和得到想要的圖標圖標命名規范化后編程人員可以很快配合找到想要的圖標。圖標設計規范圖標要有重心根據不同的圖標形狀類型使用不同的輪廓線，可以使圖標之間保持一致的視覺效果。為什么要有圖標規范 1.文字和圖標能更好的搭配使用圖標是具有指代意義的圖形，也是一種標識，即文字的一種延展，實際應用中也常與文字一起配合使用,按字體標準規范化設計的圖標更容易對齊。2.圖標適配變得更簡單，圖標風...

shengguo 2019-08-02 16:10 評論0 收藏0
我的前端規范系列-圖標工程化[好用的圖標]

摘要：能快速修改和得到想要的圖標圖標命名規范化后編程人員可以很快配合找到想要的圖標。圖標設計規范圖標要有重心根據不同的圖標形狀類型使用不同的輪廓線，可以使圖標之間保持一致的視覺效果。為什么要有圖標規范 1.文字和圖標能更好的搭配使用圖標是具有指代意義的圖形，也是一種標識，即文字的一種延展，實際應用中也常與文字一起配合使用,按字體標準規范化設計的圖標更容易對齊。2.圖標適配變得更簡單，圖標風...

KunMinX 2019-08-23 16:43 評論0 收藏0