Webpack实战加载SVG的方法

SVG在Web中的优势与基础使用

SVG作为矢量图的标准格式，已获得主流浏览器的广泛支持，成为Web矢量图形的代表。在网页开发中，使用SVG替代位图具有显著优势：

1. 相较于位图，SVG在任意缩放比例下均能保持清晰，不会因放大而模糊，有效解决了高分辨率屏幕下的图像显示问题。
2. 对于线条简单的图形，SVG文件体积通常小于位图。随着扁平化UI设计的普及，SVG在大多数场景下能提供更小的文件大小。
3. 相同图形内容下，SVG的渲染性能优于对应的高清位图。
4. SVG采用与HTML一致的XML语法进行描述，具备极高的灵活性。

绘图工具可导出独立的.svg文件，其导入方式与图片类似，既可以在CSS中直接引用，例如：

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

也可以在HTML标签中直接使用，例如：

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

使用file-loader和url-loader处理SVG

换言之，SVG 文件可直接视作普通图像进行调用，其操作方式与处理常规图片完全一致。鉴于此，前文第 3-19 节“加载图片”中阐述的两种方案——即采用 file-loader 与 url-loader——在 SVG 场景下同样适用，仅需将 Loader 配置里的 test 正则后缀调整为 .svg 即可，具体配置如下：

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

由于SVG本质上是文本格式文件，除了上述两种方法外，还有其他处理方式，下面将逐一说明。

使用raw-loader注入SVG源码

使用 raw-loader

raw-loader的作用是将文本文件的内容读取出来，并注入到JavaScript或CSS模块中。

例如在JavaScript中这样引入：

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

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

module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\"... </svg>" // 末尾省略 SVG 内容

这意味着svgContent变量的值即为字符串形式的SVG源码。由于SVG本身是HTML元素，获取到内容后，可以直接通过以下代码将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中通过background-image导入SVG。也就是说，CSS中出现background-image: url(./svgs/activity.svg)这样的代码是无效的，因为background-image: url(<svg>...</svg>)不符合CSS规范。

本实例提供项目完整代码

使用svg-inline-loader精简SVG

使用 svg-inline-loader

svg-inline-loader与前述的raw-loader功能相似，不同之处在于，svg-inline-loader会分析SVG内容，去除其中对网页运行不必要的代码，从而减小SVG的文件大小。

在使用绘图工具（如Adobe Illustrator、Sketch）制作SVG并导出时，这些工具通常会生成对网页运行无用的冗余代码。例如，以下是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']
   }
  ]
 }
};

本实例提供项目完整代码

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