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》全書在線閱讀鏈接

閱讀原文

推薦閱讀：