SVGO 是专为 SVG 文件设计的命令行压缩优化工具，能减小体积、清理冗余代码且不改变渲染效果；基于 Node.js，支持全局安装、单文件压缩、自定义配置及构建流程集成，但需注意无障碍属性、动画层级和脚本兼容性等避坑点。
SVGO 是专为 SVG 文件设计的命令行压缩优化工具，能有效减小体积、清理冗余代码，同时保持视觉效果不变。它不改变 SVG 的渲染结果，但可显著提升网页加载性能，尤其适合图标、插画等大量使用 SVG 的场景。
安装与基础使用
SVGO 基于 Node.js，需先安装 Node 环境。推荐使用 npm 全局安装：
npm install -g svgo压缩单个文件只需一条命令：
svgo input.svg -o output.svg默认启用常用优化项（如移除注释、空白符、无用元数据），无需额外配置即可获得明显体积缩减。
立即学习“前端免费学习笔记（深入）”；
常用优化配置项
可通过配置文件或命令行参数控制优化行为。典型实用选项包括：
- --disable=removeViewBox：避免移除 viewBox（防止缩放异常）
- --enable=convertPathData：合并路径指令，减少 path 字符数
- --precision=2：将坐标小数位数限制为 2 位（兼顾精度与体积）
- --config=svgo.config.js：指定自定义配置文件，便于团队统一规范
集成到构建流程
在现代前端工程中，建议将 SVGO 自动化嵌入构建环节：
- Vite / Webpack 项目可用 vite-plugin-svgr 或 svg-url-loader，自动调用 SVGO
- CI/CD 流程中添加脚本，在提交前批量处理 assets/icons/ 下所有 SVG
- Figma 导出插件（如 “SVG Export”）可配合 SVGO CLI 实现一键导出+压缩
注意事项与避坑点
部分优化可能影响 SVG 行为，需提前验证：
- 慎用 removeTitle 和 removeDesc：若依赖 aria-label 或无障碍读取，应保留
- collapseGroups 可能破坏 CSS 动画层级，复杂交互动画建议关闭
- 含 JS 事件或 <script></script> 标签的 SVG（非纯静态图）不建议压缩，SVGO 默认已跳过
- 压缩后务必在多个浏览器中检查显示效果，特别是 stroke-dasharray、filter 引用等边缘特性
