Webpack实战加载SVG的方法

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

1. SVG 相对于位图更清晰，在任意缩放的情况下后不会破坏图形的清晰度，SVG 能方便地解决高分辨率屏幕下图像显示不清楚的问题。
2. 在图形线条比较简单的情况下，SVG 文件的大小要小于位图，在扁平化 UI 流行的今天，多数情况下 SVG 会更小。
3. 图形相同的 SVG 比对应的高清图有更好的渲染性能。
4. 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

使用 svg-inline-loader

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