SVG 压缩优化

使用方式

1. 粘贴 SVG 代码，或切到「上传文件」标签页拖放 .svg 文件。
2. 勾选需要的插件。默认配置对齐 SVGO 的 preset-default；主面板 8 个 toggle 覆盖最常见的优化决策。
3. 点击压缩 SVG。优化前 / 优化后会同时显示字节数、节省百分比和实际渲染效果，方便立刻发现视觉回归。
4. 点复制结果把代码贴回项目，或下载 .svg保存清理后的文件。

哪些内容会被去掉

SVGO 会去掉编辑器元数据、注释、隐藏元素、默认属性以及其他不影响渲染的标记，同时重写 path 数据、合并相邻 path、缩短颜色值。常见图标体积一般缩小 40–70%，主要节省来自 convertPathData、mergePaths 和 cleanupNumericValues。

两个高风险 toggle

去 viewBox 和 去 width/height 默认关闭是有原因的：没有 viewBox 的 SVG 会失去响应式缩放能力，没有 width / height 的 SVG 会从父元素继承尺寸 — 对独立下载的图标来说基本不是你想要的结果。只有在完全掌控嵌入上下文时才打开（比如 sprite sheet 的父级 <use> 已经指定尺寸）。

什么时候压缩

• 生产构建：用 vite-plugin-svgo 之类把 SVGO 装进打包流程；本工具用于无 CLI 时快速核对结果。
• 手写或导出的 SVG：Figma、Illustrator、Sketch 都会留下大量编辑器元数据和无引用的 id 属性，SVGO 能清得很干净。
• HTML 中内联的 SVG：每一字节都会推迟首屏渲染，越小越好。

按设计单文件

本工具一次优化一份 SVG。批量处理、自定义插件、CI 集成请用 SVGO 命令行 — npm install -g svgo 之后跑 svgo input.svg -o output.svg 就能处理整个目录或 glob。在这里调好 toggle 组合后，把对应的 svgo.config.js 片段从 SVGO 文档里复制到构建里就能复用。

需要进一步转成位图或抽取到 React？把优化后的代码丢给 ZeroTool 的 SVG 转 PNG 和 SVG 转 JSX。