Webpack實(shí)戰(zhàn)加載SVG的方法
SVG 作為矢量圖的一種標(biāo)準(zhǔn)格式,已經(jīng)得到了各大瀏覽器的支持,它也成為了 Web 中矢量圖的代名詞。 在網(wǎng)頁(yè)中采用 SVG 代替位圖有如下好處:
- SVG 相對(duì)于位圖更清晰,在任意縮放的情況下后不會(huì)破壞圖形的清晰度,SVG 能方便地解決高分辨率屏幕下圖像顯示不清楚的問(wèn)題。
- 在圖形線條比較簡(jiǎn)單的情況下,SVG 文件的大小要小于位圖,在扁平化 UI 流行的今天,多數(shù)情況下 SVG 會(huì)更小。
- 圖形相同的 SVG 比對(duì)應(yīng)的高清圖有更好的渲染性能。
- 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í)有所幫助,也希望大家多多支持腳本之家。
相關(guā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-02JavaScript實(shí)現(xiàn)的微信二維碼圖片生成器的示例
二維碼分享功能大多是由后端實(shí)現(xiàn)的,對(duì)服務(wù)器的負(fù)載較重,這里有一個(gè)前端實(shí)現(xiàn)的版本,本文介紹了JavaScript實(shí)現(xiàn)的微信二維碼圖片生成器的示例,有需要的可以了解一下。2016-10-10JavaScript 如何計(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-09js仿京東輪播效果 選項(xiàng)卡套選項(xiàng)卡使用
這篇文章主要為大家詳細(xì)介紹了js仿京東輪播效果,選項(xiàng)卡里套選項(xiàng)卡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01