SVG 作為矢量圖的一種標(biāo)準(zhǔn)格式，已經(jīng)得到了各大瀏覽器的支持，它也成為了 Web 中矢量圖的代名詞。 在網(wǎng)頁中采用 SVG 代替位圖有如下好處：

創(chuàng)新互聯(lián)主營高陵網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā)公司,高陵h5微信平臺小程序開發(fā)搭建,高陵網(wǎng)站營銷推廣歡迎高陵等地區(qū)企業(yè)咨詢

1. SVG 相對于位圖更清晰，在任意縮放的情況下后不會破壞圖形的清晰度，SVG 能方便地解決高分辨率屏幕下圖像顯示不清楚的問題。
2. 在圖形線條比較簡單的情況下，SVG 文件的大小要小于位圖，在扁平化 UI 流行的今天，多數(shù)情況下 SVG 會更小。
3. 圖形相同的 SVG 比對應(yīng)的高清圖有更好的渲染性能。
4. SVG 采用和 HTML 一致的 XML 語法描述，靈活性很高。
   

畫圖工具能導(dǎo)出一個個 .svg 文件，SVG 的導(dǎo)入方法和圖片類似，既可以像下面這樣在 CSS 中直接使用：

body {
 background-image: url(./svgs/activity.svg);
}

也可以在 HTML 中使用：

也就是說可以直接把 SVG 文件當(dāng)成一張圖片來使用，方法和使用圖片時完全一樣。 所以在3-19 加載圖片 中介紹的兩種方法 使用 file-loader 和 使用 url-loader 對 SVG 來說同樣有效，只需要把 Loader test 配置中的文件后綴改成 .svg ，代碼如下：

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg/,
    use: ['file-loader']
   }
  ]
 },
};

由于 SVG 是文本格式的文件，除了以上兩種方法外還有其它方法，下面來一一說明。

使用 raw-loader

raw-loader 可以把文本文件的內(nèi)容讀取出來，注入到 JavaScript 或 CSS 中去。

例如在 JavaScript 中這樣寫：

import svgContent from './svgs/alert.svg';

經(jīng)過 raw-loader 處理后輸出的代碼如下：

也就是說 svgContent 的內(nèi)容就等于字符串形式的 SVG，由于 SVG 本身就是 HTML 元素，在獲取到 SVG 內(nèi)容后，可以直接通過以下代碼將 SVG 插入到網(wǎng)頁中：

window.document.getElementById('app').innerHTML = svgContent;

使用 raw-loader 時相關(guān)的 Webpack 配置如下：

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg$/,
    use: ['raw-loader']
   }
  ]
 }
};

由于 raw-loader 會直接返回 SVG 的文本內(nèi)容，并且無法通過 CSS 去展示 SVG 的文本內(nèi)容，因此采用本方法后無法在 CSS 中導(dǎo)入 SVG。 也就是說在 CSS 中不可以出現(xiàn) background-image: url(./svgs/activity.svg) 這樣的代碼，因為 background-image: url() 是不合法的。

本實例提供項目完整代碼

使用 svg-inline-loader

svg-inline-loader 和上面提到的 raw-loader 非常相似， 不同在于 svg-inline-loader 會分析 SVG 的內(nèi)容，去除其中不必要的部分代碼，以減少 SVG 的文件大小。

在使用畫圖工具如 Adobe Illustrator、Sketch 制作 SVG 后，在導(dǎo)出時這些工具會生成對網(wǎng)頁運(yùn)行來說不必要的代碼。 舉個例子，以下是 Sketch 導(dǎo)出的 SVG 的代碼：

被 svg-inline-loader 處理后會精簡成如下：

也就是說 svg-inline-loader 增加了對 SVG 的壓縮功能。

使用 svg-inline-loader 時相關(guān)的 Webpack 配置如下：

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg$/,
    use: ['svg-inline-loader']
   }
  ]
 }
};

本實例提供項目完整代碼

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。