Webpack實戰-加載SVG

SVG 做爲矢量圖的一種標準格式，已經獲得了各大瀏覽器的支持，它也成爲了 Web 中矢量圖的代名詞。 在網頁中採用 SVG 代替位圖有以下好處：

1. SVG 相對於位圖更清晰，在任意縮放的狀況下後不會破壞圖形的清晰度，SVG 能方便地解決高分辨率屏幕下圖像顯示不清楚的問題。
2. 在圖形線條比較簡單的狀況下，SVG 文件的大小要小於位圖，在扁平化 UI 流行的今天，多數狀況下 SVG 會更小。
3. 圖形相同的 SVG 比對應的高清圖有更好的渲染性能。
4. SVG 採用和 HTML 一致的 XML 語法描述，靈活性很高。

畫圖工具能導出一個個 .svg 文件，SVG 的導入方法和圖片相似，既能夠像下面這樣在 CSS 中直接使用：

body {
  background-image: url(./svgs/activity.svg);
}
複製代碼

也能夠在 HTML 中使用：

<img src="./svgs/activity.svg"/>
複製代碼

也就是說能夠直接把 SVG 文件當成一張圖片來使用，方法和使用圖片時徹底同樣。 因此在 3-19 加載圖片 中介紹的兩種方法 使用 file-loader 和 使用 url-loader 對 SVG 來講一樣有效，只須要把 Loader test 配置中的文件後綴改爲 .svg，代碼以下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg/,
        use: ['file-loader']
      }
    ]
  },
};
複製代碼

因爲 SVG 是文本格式的文件，除了以上兩種方法外還有其它方法，下面來一一說明。

使用 raw-loader

raw-loader 能夠把文本文件的內容讀取出來，注入到 JavaScript 或 CSS 中去。

例如在 JavaScript 中這樣寫：

import svgContent from './svgs/alert.svg';
複製代碼

通過 raw-loader 處理後輸出的代碼以下：

module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\"... </svg>" // 末尾省略 SVG 內容 
複製代碼

也就是說 svgContent 的內容就等於字符串形式的 SVG，因爲 SVG 自己就是 HTML 元素，在獲取到 SVG 內容後，能夠直接經過如下代碼將 SVG 插入到網頁中：

window.document.getElementById('app').innerHTML = svgContent;
複製代碼

使用 raw-loader 時相關的 Webpack 配置以下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['raw-loader']
      }
    ]
  }
};
複製代碼

因爲 raw-loader 會直接返回 SVG 的文本內容，而且沒法經過 CSS 去展現 SVG 的文本內容，所以採用本方法後沒法在 CSS 中導入 SVG。 也就是說在 CSS 中不能夠出現 background-image: url(./svgs/activity.svg) 這樣的代碼，由於 background-image: url(<svg>...</svg>) 是不合法的。

本實例提供項目完整代碼

使用 svg-inline-loader

svg-inline-loader 和上面提到的 raw-loader 很是類似， 不一樣在於 svg-inline-loader 會分析 SVG 的內容，去除其中沒必要要的部分代碼，以減小 SVG 的文件大小。

在使用畫圖工具如 Adobe Illustrator、Sketch 製做 SVG 後，在導出時這些工具會生成對網頁運行來講沒必要要的代碼。 舉個例子，如下是 Sketch 導出的 SVG 的代碼：

<svg class="icon" verison="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#000">
  <circle cx="12" cy="12" r="10"/>
</svg>
複製代碼

被 svg-inline-loader 處理後會精簡成以下：

<svg viewBox="0 0 24 24" stroke="#000"><circle cx="12" cy="12" r="10"/></svg>
複製代碼

也就是說 svg-inline-loader 增長了對 SVG 的壓縮功能。

使用 svg-inline-loader 時相關的 Webpack 配置以下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['svg-inline-loader']
      }
    ]
  }
};
複製代碼

本實例提供項目完整代碼

《深刻淺出Webpack》全書在線閱讀連接

閱讀原文