實例詳解Webpack實戰載入SVG的方法

本文主要介紹了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(486d7a50595533609bc98d44595dc670...de28f444098d408d960da4dccff3a948) 是不合法的。

本實例提供專案完整程式碼

使用svg-inline-loader

svg-inline-loader 和上面提到的raw-loader 非常相似， 不同之處在於svg-inline-loader 會分析SVG 的內容，去除其中不必要的部分程式碼，以減少SVG 的檔案大小。

在使用畫圖工具如 Adob​​​​e 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最佳化設定縮小檔案搜尋範圍

#詳解Webpack框架核心概念

webpack+express多頁網站開發實例詳解

以上是實例詳解Webpack實戰載入SVG的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！