SVG 是一种基于 XML 的矢量图形语言，在Web开发中，用于实现矢量图形。相较于位图，它能无损放大且在Retina屏幕下保持清晰。而SVG图片的优化也显得非常重要，不仅可以减轻网页加载时的负担，还能优化网站的性能，缩短页面的加载时间。SVGO-Loader就是一款优化SVG文件的利器，本文将从多个方面对它进行详细阐述，帮助读者更好地理解并应用它。
一、安装和配置SVGO-Loader
SVGO-Loader 是 webpack 的一个 loader，用于优化 SVG 文件。下面，我们将从安装、配置两个方面来介绍如何使用 SVGO-Loader。
1、安装
npm install --save-dev svgo-loader svgo
2、配置
module: {
rules: [{
test: /\.svg$/,
use: [
'file-loader',
{
loader: 'svgo-loader',
options: {
plugins: [
{ removeTitle: true },
{ convertColors: { shorthex: false } },
{ convertPathData: false }
]
}
}
]
}]
}
在上述代码中，我们首先安装了 svgo 和 svgo-loader。然后在 module.rules 中配置规则，当文件后缀为 .svg 时，使用 svgo-loader 进行优化。我们可以通过 options 配置选项来对 SVG 进行优化。在本例中，我们使用了三个插件，分别是 removeTitle（删除标签中的 title ），convertColors（转换颜色），convertPathData（转换路径数据）。
二、使用SVGO-Loader进行SVG优化
SVGO-Loader作为webpack的一个loader，可以在自动化构建项目过程中对SVG进行优化校验，以实现快速web应用。SVGO-Loader的优化特点大致如下：
1、删除无用信息：SVGO-Loader可以删去SVG里面一些不必要的（宽高默认值的z轴坐标等等）信息。
<svg version="1.1" ... height="128px" width="128px">
<desc>Created with Sketch.</desc>
<defs></defs>
<path fill="#333333" d="M64 ...z"></path>
</svg>
优化后的结果：
<svg xmlns="http://www.w3.org/2000/svg">
<path fill="#333333" d="M64 ...z"></path>
</svg>
2、转换颜色格式：SVGO-Loader可以将所有颜色格式转换为你所需要的格式。比如从rgb或rgba转为#HEX颜色。
<path fill="rgb(255, 255, 255)"></path>
通过SVGO-Loader, 可以将上述代码转换为：
<path fill="#ffffff"></path>
3、优化路径：SVGO-Loader 通过调整路径结构来减少代码行数和缩小文件大小。
<path d="M20,40 L10,30 L20,20 L30,10 L40,20 L50,30 L40,40 L20,40"></path>
优化后的结果：
<path d="M20,40L10,30L20,20L30,10L40,20L50,30L40,40Z"></path>
三、SVGO-Loader的插件与配置
SVGO-Loader的 options 中的 plugins 属性是一个插件数组，通过这个数组你可以很容易地控制对SVG的优化。下面罗列了一些常用的插件及其功能。
1、removeTitle
用于删除 <title> 标签
{ removeTitle: true }
2、removeDesc
用于删除 <desc> 标签
{ removeDesc: true }
3、convertColors
color 指的是 SVG 中的填充和描边颜色。这个插件可以将这些颜色格式转换为你所需要的格式。它有以下几个选项：
shorthex: 是否使用短格式的#RGB，如为 false，则使用完整的 6 位 hexadecimal。
{ convertColors: { shorthex: false } }
4、convertPathData
用于将 path 数据进行优化，它有两个选项：
noSpaceAfterFlags：布尔，默认为 true，该插件可以优化 path 数据，删除无用空格。
floatPrecision：整数，保留多少小数位。
{ convertPathData: { noSpaceAfterFlags: true, precision: 2 } }
5、removeAttrs
用于将指定的属性从 SVG 中删除，有三个选项：
attrs：数组，要删除的属性列表。
element: 字符串，表示要删除属性的标签。
options：配置属性对象。下面是一些可用的配置：
preserveCurrentColor：是否保留currentColor属性。
inheritStyleFromElement：是否从XML父级组件中继承内敛样式。
removeAttributesByRegex：可使用正则表达式删除属性。
{ removeAttrs: { attrs: ['fill', 'stroke'], element: 'path', options: {inheritStyleFromElement: false} } }
四、性能优化分享
优化 SVG 文件同时也是优化 Web 性能的一部分。下面是一些有关 SVG 以及 SVG 优化的最佳实践。
1、避免使用压缩的 SVG
将 SVG 压缩后会使 SVG 文件变小，但是反过来也会增加文件解压的时间。因为SVG文件需要在将其渲染前先解压缩。一些现代的浏览器已经开发支持压缩格式的 SVG，因此，并不需要将 SVG 压缩。
2、规范化 SVG 的 viewBox 属性。
使用 viewBox 来定位 SVG，而不是将 SVG 的坐标数组直接嵌入页面。
3、减少 SVG 文件中的节点数量。
SVG文件能够随意扩大或缩小而不失真，与之对应的，它的代码也更加优雅紧凑。因此，减少SVG中节点的数量是一种常见的最佳实践。同时使用 SVGO-Loader 可以帮助我们更好地实现。
4、基于 Data URI 的 SVG 加载。
数据 URI 减少了对外部资源的请求，可以将 SVG 直接嵌入到页面中。而且，它还可以在需要时动态加载。
五、总结
SVGO-Loader 是像 webpack 这样的构建工具的极好选择，用于优化 SVG。它可以快速进行 SVG 的处理、实现优化SVG文件的特定操作。使用SVGO-Loader可以轻松地操纵SVG文件来满足你的需求，让你的网站更快、更精致。
