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

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

比方說(shuō)現(xiàn)在要做下圖這樣的視覺(jué)效果：

分析：可能需要三張圖片

鼠標(biāo)移入時(shí)的背景圖

漸變色前景圖

鼠標(biāo)移入時(shí)白色前景圖

現(xiàn)在對(duì)比一下背景圖使用圖片與使用 SVG 格式的體積大小（做圖的時(shí)候拿錯(cuò)顏色了，其他都一樣，能說(shuō)明道理就行，見(jiàn)諒見(jiàn)諒）

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

這個(gè) SVG 是在 Sketch 設(shè)計(jì)稿中導(dǎo)出來(lái)的，源碼包含了很多冗余無(wú)效的代碼，實(shí)際上是可以優(yōu)化的，如下。

內(nèi)部源碼

優(yōu)化后

優(yōu)化后大約可以減去 1K 個(gè)字符。當(dāng)然這個(gè)需要內(nèi)聯(lián)使用（Inline SVG）

使用 CSS Sprite 的方式可以減少 HTTP 請(qǐng)求，貌似還可以減少總體圖片體積。
這里用前景圖來(lái)對(duì)比一下，實(shí)際上背景圖和前景圖都可以合成一張 sprite。

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

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

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

除開(kāi)復(fù)雜圖像，選擇 Inline SVG 或者 標(biāo)簽的方式引入 SVG，會(huì)比使用 獨(dú)立圖像 或 組合圖像 (CSS sprite) 的方式更好。

首先看下 Iconfont 與 SVG 圖標(biāo)的使用方式，來(lái)源 阿里 Iconfont 平臺(tái)

很明顯 SVG Sprite 使用起來(lái)沒(méi)有 Iconfont 方便，需要寫 3 行代碼， 而后者只需要寫 1 行。
當(dāng)然上面的不是重點(diǎn)，重點(diǎn)是下面的換色與多色支持

1、Iconfont 通過(guò) CSS color 可以輕松更換圖標(biāo)顏色。

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

// 定義 symbol


// 使用

渲染出來(lái)的 DOM 結(jié)構(gòu)是這樣的：

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

svg /deep/ path {
    fill: red;
}

當(dāng)然，實(shí)際上在只需要在父級(jí)元素上添加 fill: red 這樣的 CSS 也能起到同樣的效果，里面的元素會(huì)繼承父級(jí)的樣式。

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

1、Iconfont 是不支持多色圖標(biāo)的。

2、而 SVG Sprite 可以利用 CSS 變量或 shadow DOM 的方式支持多色圖標(biāo)，shadow DOM 的方式上面已經(jīng)說(shuō)明，下面借用他人的文章解釋 CSS 變量實(shí)現(xiàn)多色，如下。

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

CSS 變量：Edge15+

shadow DOM：更差。兼容性列表

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

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

使用 Iconfont，因?yàn)樽煮w文件是異步加載的，所以在字體文件還沒(méi)有加載完畢之前，圖標(biāo)位會(huì)留空，加載完畢后才會(huì)顯示出來(lái)，這個(gè)過(guò)程就會(huì)出現(xiàn)向下圖（來(lái)自 GitHub blog）這樣的抖動(dòng)，而 SVG Sprite 或 Inline SVG 內(nèi)聯(lián)加載則不會(huì)出現(xiàn)這樣的抖動(dòng)。

當(dāng)然，Iconfont 也可以內(nèi)聯(lián)加載，不過(guò)需要轉(zhuǎn)換成 base64 同樣式表一起加載，轉(zhuǎn)換后的文件體積則會(huì)變?yōu)樵瓉?lái)的 1.3 倍左右
這是由 base64 編碼決定的（編碼知識(shí)鏈接）。

字體轉(zhuǎn)換成 base64 的一個(gè)在線工具：https://transfonter.org/

這個(gè)是 SVG 對(duì)比于 Iconfont 的一個(gè)不足之處，如下圖。

Inline SVG 與 SVG Sprite 體積差不多。

三者的開(kāi)發(fā)成本都差不多，不過(guò) SVG 的兩種方式都需要前期做些配置，后期開(kāi)發(fā)就會(huì)順手很多（單頁(yè)應(yīng)用）。

以 vue + vue cli 為例說(shuō)明 Inline SVG 便捷使用。

{
  // 排除需要轉(zhuǎn)換成 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" },
    // 精簡(jiǎn)優(yōu)化 SVG 源代碼
    {
      loader: "svgo-loader",
      options: {
        plugins: [
          { removeTitle: true },
          { removeViewBox: false },
          { removeDimensions: true },
          // ...其他參數(shù)
        ]
      }
    }
  ]
}

或者


  

應(yīng)該是 Inline SVG vs SVG Sprite vs Iconfont 的結(jié)論，如下圖。

選擇 Inline SVG 或許是一個(gè)不錯(cuò)地選擇去替代 Iconfont 的使用方式。

GitHub 網(wǎng)站很早之前已經(jīng)將圖標(biāo)的展示方式由 Iconfont 轉(zhuǎn)成了 Inline SVG, 這一篇文章是他們的描述：
https://blog.github.com/2016-...

很早的一篇文章關(guān)于兩者的對(duì)比：https://css-tricks.com/icon-f...

歡迎各抒己見(jiàn)談?wù)撘幌聦?duì) SVG 和 Iconfont 的看法，優(yōu)缺點(diǎn)，歡迎留言。

然后，本文同步發(fā)表于【凹凸實(shí)驗(yàn)室博客】或微信公眾號(hào)，歡迎關(guān)注我們，么么噠。