SVGO

SVGO，即 SVG 优化器，是一款用于优化 SVG 文件的 Node.js 库和命令行应用程序。

为什么?

从矢量编辑器中导出的 SVG 文件通常包含大量冗余信息。这包括编辑器元数据、注释、隐藏元素、默认或次优值以及其他可以安全删除或转换而不影响渲染的内容。

安装

您可以通过 npm、yarn 或 pnpm 全局安装 SVGO。或者移除全局标志 (global/-g) 在您的 Node.js 项目中使用它。

# npm
npm install -g svgo

# yarn
yarn global add svgo

# pnpm
pnpm add -g svgo

命令行使用

处理单个文件:

svgo one.svg two.svg -o one.min.svg two.min.svg

使用 -f/--folder 递归处理目录中的文件:

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

高级用法帮助:

svgo --help

配置

SVGO 采用插件架构。您可以在插件 | SVGO 文档中了解所有插件的详细信息,在默认预设 | SVGO 文档中了解默认插件。

SVGO 从 svgo.config.mjs 或 --config path/to/config.mjs 命令行选项读取配置。某些其他参数也可以通过命令行选项配置。

svgo.config.mjs

export default {
  multipass: false, // 布尔值
  datauri: 'base64', // 'base64'|'enc'|'unenc'
  js2svg: {
    indent: 4, // 数字
    pretty: false, // 布尔值
  },
  plugins: [
    'preset-default', // 默认启用的内置插件
    'prefixIds', // 按名称启用内置插件

    // 使用对象配置插件
    {
      name: 'prefixIds',
      params: {
        prefix: 'uwu',
      },
    },
  ],
};

默认预设

您可以通过配置或禁用相应的插件来调整默认预设,以满足您的需求。

svgo.config.mjs

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // 禁用默认插件
          cleanupIds: false,

          // 自定义默认插件的参数
          inlineStyles: {
            onlyMatchedOnce: false,
          },
        },
      },
    },
  ],
};

您可以在默认预设 | SVGO 文档中找到默认插件的列表及其运行顺序。

自定义插件

您也可以指定自定义插件:

svgo.config.mjs

import importedPlugin from './imported-plugin';

export default {
  plugins: [
    // 从另一个 JavaScript 文件导入的插件
    importedPlugin,

    // 内联定义的插件
    {
      name: 'customPlugin',
      params: {
        paramName: 'paramValue',
      },
      fn: (ast, params, info) => {},
    },
  ],
};

API 使用

SVGO 提供了一些底层实用程序。

optimize

SVGO 的核心是 optimize 函数。

import { optimize } from 'svgo';

const result = optimize(svgString, {
  path: 'path-to.svg', // 建议
  multipass: true, // 所有其他配置字段都可以在此处使用
});

const optimizedSvgString = result.data;

loadConfig

如果您要编写一个建立在 SVGO 之上的工具,您可能需要解析 svgo.config.mjs 文件。

import { loadConfig } from 'svgo';

const config = await loadConfig();

您还可以指定路径并自定义当前工作目录。

const config = await loadConfig(configFile, cwd);

赞助商

SheetJS LLC	Fontello

许可和版权

此软件根据 MIT 许可证的条款发布。

Logo 由 André Castillo设计。