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);
svg图形}
也可以在 HTML 中使⽤：
<img src="./svgs/activity.svg"/>
也就是说可以直接把 SVG ⽂件当成⼀张图⽚来使⽤，⽅法和使⽤图⽚时完全⼀样。所以在3-19 加载图⽚中介绍的两种⽅法使⽤ file-loader 和使⽤ url-loader 对 SVG 来说同样有效，只需要把 Loader test 配置中的⽂件后缀改成 .svg ，代码如下：
module: {
rules: [
{
test: /\.svg/,
use: ['file-loader']
}
]
},
};
由于 SVG 是⽂本格式的⽂件，除了以上两种⽅法外还有其它⽅法，下⾯来⼀⼀说明。
使⽤ raw-loader
可以把⽂本⽂件的内容读取出来，注⼊到 JavaScript 或 CSS 中去。
例如在 JavaScript 中这样写：
import svgContent from './svgs/alert.svg';
经过 raw-loader 处理后输出的代码如下：
复制代码代码如下:
也就是说 svgContent 的内容就等于字符串形式的 SVG，由于 SVG 本⾝就是 HTML 元素，在获取到 SVG 内容后，可以直接通过以下代码将 SVG 插⼊到⽹页中：
ElementById('app').innerHTML = svgContent;
使⽤ raw-loader 时相关的 Webpack 配置如下：
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>...</svg>) 是不合法的。
本实例提供
使⽤ svg-inline-loader
和上⾯提到的 raw-loader ⾮常相似，不同在于 svg-inline-loader 会分析 SVG 的内容，去除其中不必要的部分代码，以减少SVG 的⽂件⼤⼩。
在使⽤画图⼯具如 Adobe Illustrator、Sketch 制作 SVG 后，在导出时这些⼯具会⽣成对⽹页运⾏来说不必要的代码。举个例⼦，以下是 Sketch 导出的 SVG 的代码：
<svg class="icon" verison="1.1" xmlns="/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: {
rules: [
{
test: /\.svg$/,
use: ['svg-inline-loader']
}
]
}
};
本实例提供
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。