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

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

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

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

也可以在 HTML 中使用：

<img src="./svgs/activity.svg"/>

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

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

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

使用 raw-loader

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

例如在 JavaScript 中這樣寫：

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

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

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

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

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

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

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

本實(shí)例提供項(xiàng)目完整代碼

使用 svg-inline-loader

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

在使用畫圖工具如 Adobe Illustrator、Sketch 制作 SVG 后，在導(dǎo)出時(shí)這些工具會(huì)生成對(duì)網(wǎng)頁(yè)運(yùn)行來(lái)說(shuō)不必要的代碼。 舉個(gè)例子，以下是 Sketch 導(dǎo)出的 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 處理后會(huì)精簡(jiǎn)成如下：

<svg viewBox="0 0 24 24" stroke="#000"><circle cx="12" cy="12" r="10"/></svg>

也就是說(shuō) svg-inline-loader 增加了對(duì) SVG 的壓縮功能。

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

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

本實(shí)例提供項(xiàng)目完整代碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論