欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Webpack實(shí)戰(zhàn)加載SVG的方法

 更新時(shí)間:2017年12月26日 11:24:54   作者:浩麟  
本篇文章主要介紹了Webpack實(shí)戰(zhàn)加載SVG的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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 處理后輸出的代碼如下:

復(fù)制代碼 代碼如下:

module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\"... </svg>" // 末尾省略 SVG 內(nèi)容
 

也就是說(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • jQuery檢查元素存在性(推薦)

    jQuery檢查元素存在性(推薦)

    這篇文章主要介紹了JavaScript檢查元素存在性的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-09-09
  • angular-tree-component的使用詳解

    angular-tree-component的使用詳解

    這篇文章主要介紹了angular-tree-component的使用詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-07-07
  • 解決微信小程序中轉(zhuǎn)換時(shí)間格式IOS不兼容的問(wèn)題

    解決微信小程序中轉(zhuǎn)換時(shí)間格式IOS不兼容的問(wèn)題

    今天小編就為大家分享一篇關(guān)于解決微信小程序中轉(zhuǎn)換時(shí)間格式IOS不兼容的問(wèn)題,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧
    2019-02-02
  • js獲取當(dāng)前周、上一周、下一周日期

    js獲取當(dāng)前周、上一周、下一周日期

    本文主要介紹了js獲取當(dāng)前周、上一周、下一周日期的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
    2017-03-03
  • JavaScript實(shí)現(xiàn)的微信二維碼圖片生成器的示例

    JavaScript實(shí)現(xiàn)的微信二維碼圖片生成器的示例

    二維碼分享功能大多是由后端實(shí)現(xiàn)的,對(duì)服務(wù)器的負(fù)載較重,這里有一個(gè)前端實(shí)現(xiàn)的版本,本文介紹了JavaScript實(shí)現(xiàn)的微信二維碼圖片生成器的示例,有需要的可以了解一下。
    2016-10-10
  • JavaScript 如何計(jì)算文本的行數(shù)的實(shí)現(xiàn)

    JavaScript 如何計(jì)算文本的行數(shù)的實(shí)現(xiàn)

    這篇文章主要介紹了JavaScript 如何計(jì)算文本的行數(shù)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • 提高javascript效率 一次判斷,而不要次次判斷

    提高javascript效率 一次判斷,而不要次次判斷

    提高javascript效率 一次判斷,而不要次次判斷,學(xué)習(xí)js的朋友可以參考下
    2012-03-03
  • javascript中正則表達(dá)式語(yǔ)法詳解

    javascript中正則表達(dá)式語(yǔ)法詳解

    這篇文章主要介紹了javascript中正則表達(dá)式語(yǔ)法詳解,文章通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-08-08
  • js 獲取input點(diǎn)選按鈕的值的方法

    js 獲取input點(diǎn)選按鈕的值的方法

    這篇文章主要介紹了js 如何獲取input點(diǎn)選按鈕的值,需要的朋友可以參考下
    2014-04-04
  • js仿京東輪播效果 選項(xiàng)卡套選項(xiàng)卡使用

    js仿京東輪播效果 選項(xiàng)卡套選項(xiàng)卡使用

    這篇文章主要為大家詳細(xì)介紹了js仿京東輪播效果,選項(xiàng)卡里套選項(xiàng)卡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-01-01

最新評(píng)論