SVGO 从 v3 迁移到 v4 的完整指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00780/article/details/148362417

SVGO 从 v3 迁移到 v4 的完整指南

svgo ⚙️ Node.js tool for optimizing SVG files 项目地址: https://gitcode.com/gh_mirrors/sv/svgo

SVGO (SVG Optimizer) 是一个流行的 SVG 优化工具，通过移除冗余信息和优化结构来减小 SVG 文件体积。随着 v4 版本的发布，SVGO 引入了一些重大变更，本文将详细解析这些变化，帮助开发者顺利完成迁移。

版本要求变更

SVGO v4 现在要求 Node.js 16.0.0 或更高版本。如果你的项目运行在较旧的 Node.js 版本上，需要先升级 Node.js 环境。

默认插件配置变化

v4 版本对默认插件集（preset-default）进行了重要调整，主要出于对可访问性和可扩展性的考虑：

removeViewBox 插件不再默认启用
- 原因：保留 viewBox 属性可以确保 SVG 在不同尺寸下保持良好缩放能力
- 影响：如果项目依赖自动移除 viewBox 的行为，需要显式配置
removeTitle 插件不再默认启用
- 原因：title 元素对屏幕阅读器等辅助技术至关重要
- 影响：如需移除 title 元素，需要手动添加该插件
removeScriptElement 插件重命名为 removeScripts
- 新插件不仅移除 <script> 元素，还会移除事件处理程序和脚本 URI
- 影响：配置文件中需要更新插件名称

配置调整示例

// 更新后的配置文件示例
export default {
  plugins: [
    'preset-default', // 默认启用的内置插件集
    'removeViewBox',  // 如需移除 viewBox 需显式添加
    'removeTitle',    // 如需移除 title 需显式添加
    'removeScripts',  // 原 removeScriptElement 的替代
  ],
};

公共 API 与内部 API 分离

v4 版本严格区分了公共 API 和内部 API，这是为了更好的维护性和稳定性。开发者现在只能导入明确公开的 API。

浏览器端使用变更

// 旧方式
import { optimize } from 'svgo/dist/svgo.browser.js';

// 新方式
import { optimize } from 'svgo/browser';

插件和辅助工具导入方式

// 导入辅助工具
import { querySelector, querySelectorAll } from 'svgo';

// 导入内置插件集
import { builtinPlugins } from 'svgo';

// 获取特定插件
const presetDefault = builtinPlugins.find(plugin => plugin.name === 'preset-default');

选择器辅助工具变更

Xast/CSS 选择器辅助工具现在需要显式传递父节点映射，这对自定义插件开发者影响较大。

迁移示例

// 旧方式
import { querySelectorAll } from 'svgo';
const nodes = querySelectorAll(childNode, selector);

// 新方式
import { querySelectorAll, mapNodesToParents } from 'svgo';
const nodes = querySelectorAll(childNode, selector, mapNodesToParents(rootNode));

新 API 提供了更精确的选择器控制：

仅查询子节点及其后代：不传递 rootNode
查询整个节点树：传递 rootNode
与 v3 相同行为：直接使用 rootNode 作为第一个参数

命名导出取代默认导出

v4 版本移除了所有默认导出，统一使用命名导出。

迁移方案

// 旧方式
import svgo from 'svgo';
svgo.optimize('<svg></svg>');

// 选项1：使用命名导出
import { optimize } from 'svgo';
optimize('<svg></svg>');

// 选项2：导入整个命名空间
import * as svgo from 'svgo';
svgo.optimize('<svg></svg>');