Webpack實戰-載入SVG

浩麟發表於2017-12-26
WebSVG

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實戰-載入SVG

《深入淺出Webpack》全書線上閱讀連結

閱讀原文

相關文章