深入理解SVGO-Loader：优化SVG文件的利器

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文件来满足你的需求，让你的网站更快、更精致。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/236172.html