這篇文章主要介紹了Webpack實戰載入SVG的方法，現在分享給大家，也給大家做個參考。
SVG 作為向量圖的一種標準格式，已經得到了各大瀏覽器的支持，它也成為了 Web 中向量圖的代名詞。在網頁中採用SVG 代替點陣圖有以下好處：
SVG 相對於點陣圖更清晰，在任意縮放的情況下後不會破壞圖形的清晰度，SVG 能方便地解決高解析度螢幕下影像顯示不清楚的問題。
在圖形線條比較簡單的情況下，SVG 檔案的大小要小於位圖，在扁平化 UI 流行的今天，多數情況下 SVG 會更小。
圖形相同的 SVG 比對應的高畫質圖有更好的渲染效能。
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-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中有關vue項目資源檔案報404問題（詳細教學）
在AngularJS中使用ui-route實作多層巢狀路由（詳細教學）
#以上是在Webpack中如何載入SVG的詳細內容。更多資訊請關注PHP中文網其他相關文章！
