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

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

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

使用场景

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

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

功能特性

svgo 支持以下功能特性：

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

使用方法

安装

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

npm install -g svgo

基本使用

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

svgo input.svg output.svg

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

参数配置

svgo 提供了许多参数选项，可以按照您的需求调整优化级别和策略。可以在命令行中查看所有可用的选项：

svgo --help

或者，您也可以创建一个名为 .svgrc 的配置文件来保存常用的设置，以便在后续的优化任务中直接使用。

示例

下面是一些使用 svgo 进行优化的例子：

基本优化

首先，我们有一个原始的 SVG 文件（example-original.svg），如下所示：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="#f00" />
</svg>

我们可以使用 svgo 对其进行优化，如下所示：

svgo example-original.svg optimized-svg.svg

生成的优化后的 SVG 文件（optimized-svg.svg）如下所示：

<svg width="100" height="100"><rect x="10" y="10" width="80" height="80" fill="#f00"/></svg>

可以看到，优化后的 SVG 文件变得更小并且保留了所有重要的图形信息。

参数配置

为了进一步提高优化效果，您可以创建一个 .svgrc 配置文件来指定更多的优化选项。例如，我们可以禁用 removeViewBox 选项，如下所示：

{
  "plugins": [
    { "cleanupEnableBackground": true },
    { "removeViewBox": false }
  ]
}

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

svgo --config .svgrc example-original.svg optimized-svg.svg

这样就可以获得更加个性化的优化结果。

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