svgo: 一款强大的 SVG 优化工具

svgo: 一款强大的 SVG 优化工具

svgo 是一个基于 Node.js 的命令行工具，用于对 SVG 图形进行压缩和优化。它通过移除不必要的数据和元信息、转换为更简洁的语法等方式，使 SVG 文件变得更小、加载更快，并且不会影响图形的质量。

项目网址: https://github.com/svg/svgo

使用场景

svgo 可以用于各种需要处理 SVG 图形的场合：

网站和应用中的图标、logo 和矢量图形。
数据可视化图表中的图形元素。
在打印或 PDF 文档中使用的矢量图形。
需要优化 SVG 图像大小的其他任何情况。

功能特性

svgo 支持以下功能特性：

移除不必要的元信息，如注释、隐藏元素等。
转换为更简洁的语法，例如将 <circle> 元素转换为 <path> 元素。
压缩文本内容，例如将文本转为路径或将文字属性合并。
删除不必要的填充和描边颜色。
合并重复的颜色和样式规则。
自动修复一些常见的 SVG 错误。

使用方法

安装

在您的计算机上安装 svgo，请运行以下命令：

npm install -g svgo

基本使用

要优化 SVG 单个文件，请在命令行中输入以下命令：

svgo input.svg -o output.svg

这将会把 input.svg 文件优化成 output.svg。

使用 -f 命令使用递归处理文件目录

svgo -f path/to/directory_with_svgs -o path/to/output_directory

参数配置

为了进一步提高优化效果，您可以用配置文件来指定更多的优化选项。

例如：我们可以禁用默认预设里面的 removeViewBox 选项。

创建一个文件名为config.mjs的配置文件

代码如下所示：

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // disable a default plugin
          removeViewBox: false,

          // customize the params of a default plugin
          inlineStyles: {
            onlyMatchedOnce: false,
          },
        },
      },
    },
  ],
};

然后，在命令行中运行以下示例命令：

svgo --config path/to/config.mjs example-original.svg -o optimized-svg.svg

或者新建一个名为svgo.config.mjs的配置文件，代码如上所示。把文件放在执行命令的同一目录下，执行命令时就会自动读取svgo.config.mjs 这个配置文件。

命令示例：

svgo input.svg -o output.svg

这样在执行命令时就不用输入路径和配置文件了，会自动读取当前目录里的 svgo.config.mjs 配置文件。

总之，svgo 是一款非常出色的 SVG 优化工具，可以帮助您轻松地优化 SVG 图形，使其达到最佳性能。赶快试试吧！