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 處理后輸出的代碼如下：

也就是說 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']
   }
  ]
 }
};

本實例提供項目完整代碼

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。