本篇文章主要介绍了webpack实战加载svg的方法，现在分享给大家，也给大家做个参考。
SVG 作为矢量图的一种标准格式，已经得到了各大浏览器的支持，它也成为了 Web 中矢量图的代名词。 在网页中采用 SVG 代替位图有如下好处：
SVG 相对于位图更清晰，在任意缩放的情况下后不会破坏图形的清晰度，SVG 能方便地解决高分辨率屏幕下图像显示不清楚的问题。
在图形线条比较简单的情况下，SVG 文件的大小要小于位图，在扁平化 UI 流行的今天，多数情况下 SVG 会更小。
图形相同的 SVG 比对应的高清图有更好的渲染性能。
SVG 采用和 HTML 一致的 XML 语法描述，灵活性很高。
画图工具能导出一个个 .svg 文件，SVG 的导入方法和图片类似，既可以像下面这样在 CSS 中直接使用：
body { background-image: url(./svgs/activity.svg);}
登录后复制
也可以在 HTML 中使用：
@@##@@
登录后复制
也就是说可以直接把 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 处理后输出的代码如下：
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(./svgs/activity.svg) 这样的代码，因为 background-image: url(…) 是不合法的。
本实例提供项目完整代码
使用 svg-inline-loader
svg-inline-loader 和上面提到的 raw-loader 非常相似， 不同在于 svg-inline-loader 会分析 SVG 的内容，去除其中不必要的部分代码，以减少 SVG 的文件大小。
在使用画图工具如 Adobe Illustrator、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'] } ] }};
登录后复制
本实例提供项目完整代码
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在vue.js中整合vux如何实现上拉加载下拉刷新
在vue.js中整合vux如何实现上拉加载下拉刷新
在vue.js中整合vux如何实现上拉加载下拉刷新
在vue.js中整合vux如何实现上拉加载下拉刷新
在vue.js中整合vux如何实现上拉加载下拉刷新
以上就是在Webpack中如何加载SVG的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3184312.html
