Webpack實戰(zhàn)加載SVG的方法
SVG 作為矢量圖的一種標準格式,已經得到了各大瀏覽器的支持,它也成為了 Web 中矢量圖的代名詞。 在網(wǎng)頁中采用 SVG 代替位圖有如下好處:
- SVG 相對于位圖更清晰,在任意縮放的情況下后不會破壞圖形的清晰度,SVG 能方便地解決高分辨率屏幕下圖像顯示不清楚的問題。
- 在圖形線條比較簡單的情況下,SVG 文件的大小要小于位圖,在扁平化 UI 流行的今天,多數(shù)情況下 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 處理后輸出的代碼如下:
也就是說 svgContent 的內容就等于字符串形式的 SVG,由于 SVG 本身就是 HTML 元素,在獲取到 SVG 內容后,可以直接通過以下代碼將 SVG 插入到網(wǎng)頁中:
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 中不可以出現(xiàn) background-image: url(./svgs/activity.svg) 這樣的代碼,因為 background-image: url(<svg>...</svg>) 是不合法的。
本實例提供項目完整代碼
使用 svg-inline-loader
svg-inline-loader 和上面提到的 raw-loader 非常相似, 不同在于 svg-inline-loader 會分析 SVG 的內容,去除其中不必要的部分代碼,以減少 SVG 的文件大小。
在使用畫圖工具如 Adobe Illustrator、Sketch 制作 SVG 后,在導出時這些工具會生成對網(wǎng)頁運行來說不必要的代碼。 舉個例子,以下是 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'] } ] } };
本實例提供項目完整代碼
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript實現(xiàn)的微信二維碼圖片生成器的示例
二維碼分享功能大多是由后端實現(xiàn)的,對服務器的負載較重,這里有一個前端實現(xiàn)的版本,本文介紹了JavaScript實現(xiàn)的微信二維碼圖片生成器的示例,有需要的可以了解一下。2016-10-10JavaScript 如何計算文本的行數(shù)的實現(xiàn)
這篇文章主要介紹了JavaScript 如何計算文本的行數(shù)的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-09-09