Webpack实战加载SVG的方法

2023-09-18 18:40:05 126

SVG作为矢量图的一种标准格式，已经得到了各大浏览器的支持，它也成为了Web中矢量图的代名词。在网页中采用SVG代替位图有如下好处：

SVG相对于位图更清晰，在任意缩放的情况下后不会破坏图形的清晰度，SVG能方便地解决高分辨率屏幕下图像显示不清楚的问题。
在图形线条比较简单的情况下，SVG文件的大小要小于位图，在扁平化UI流行的今天，多数情况下SVG会更小。
图形相同的SVG比对应的高清图有更好的渲染性能。
SVG采用和HTML一致的XML语法描述，灵活性很高。

画图工具能导出一个个.svg文件，SVG的导入方法和图片类似，既可以像下面这样在CSS中直接使用：

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

也可以在HTML中使用：

也就是说可以直接把SVG文件当成一张图片来使用，方法和使用图片时完全一样。所以在3-19加载图片中介绍的两种方法使用file-loader和使用url-loader对SVG来说同样有效，只需要把Loadertest配置中的文件后缀改成.svg，代码如下：

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

由于SVG是文本格式的文件，除了以上两种方法外还有其它方法，下面来一一说明。

使用raw-loader

raw-loader可以把文本文件的内容读取出来，注入到JavaScript或CSS中去。

例如在JavaScript中这样写：

importsvgContentfrom'./svgs/alert.svg';

经过raw-loader处理后输出的代码如下：


module.exports=""//末尾省略SVG内容

也就是说svgContent的内容就等于字符串形式的SVG，由于SVG本身就是HTML元素，在获取到SVG内容后，可以直接通过以下代码将SVG插入到网页中：

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中不可以出现background-image:url(http://dh.wk163.com./svgs/activity.svg)这样的代码，因为background-image:url()是不合法的。

本实例提供项目完整代码

使用svg-inline-loader

svg-inline-loader和上面提到的raw-loader非常相似，不同在于svg-inline-loader会分析SVG的内容，去除其中不必要的部分代码，以减少SVG的文件大小。

在使用画图工具如AdobeIllustrator、Sketch制作SVG后，在导出时这些工具会生成对网页运行来说不必要的代码。举个例子，以下是Sketch导出的SVG的代码：

被svg-inline-loader处理后会精简成如下：

也就是说svg-inline-loader增加了对SVG的压缩功能。

使用svg-inline-loader时相关的Webpack配置如下：

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

本实例提供项目完整代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Webpack实战加载SVG的方法

热门推荐

随机推荐