SVG Optimizer
Understand SVG Optimizer
从 SVG 标记中剔除编辑器元数据、注释和无用属性，并报告精确的字节节省量。
How it works
从 Inkscape、Illustrator、Figma 或 Sketch 导出的 SVG 携带着大量浏览器从不读取的信息：XML 处理指令、DOCTYPE、注释、一整块 RDF 的 `<metadata>`，以及诸如 `inkscape:label` 和 `sodipodi:docname` 这样成套的编辑器私有属性命名空间。这些会被移除，像 `style="fill: #5C5BFE"` 这样简单的 `style` 声明会被提升为表现属性（`fill="#5C5BFE"`），文档中无人引用的 `id` 属性会被丢弃，标签之间的空白会被折叠。体积按优化前后的 UTF-8 字节数测量，因此显示的百分比是压缩之前在链路上的真实节省。
When to use it
- 在把图标集内联进组件库或构建精灵图之前先清理它们
- 削减将被嵌入 HTML 的 SVG 的体积，那里每一个字节都在关键路径上
- 在发布文件之前移除编辑器留下的文档名、图层名和作者元数据
- 让机器生成的 SVG 变得足够可读，以便手工编辑
Watch out for
- 只被外部 CSS 或 JavaScript 引用的 `id` 看起来像是没用的，因而会被移除。如果你的样式表定位 `#logo-path`，或你的脚本调用 `getElementById`，请在发布前检查输出。
- 把内联 `style` 提升为属性会降低它的优先级。内联样式胜过任何样式表规则；而表现属性会输给所有规则，因此原本被覆盖的规则现在可能反而生效。
- 路径数据原封不动。坐标不会被取整，路径不会被合并，图形也不会被转换——一幅精细插画里最深的那部分节省，需要 SVGO 这样的完整优化器。
- 经 gzip 或 brotli 压缩之后，字节节省会缩水。重复的元数据压缩效果很好，因此 60% 的原始缩减，在网络上可能更接近 25%。
Not the right tool for: 净化不可信的 SVG。这是体积优化器，不是安全过滤器——从用户处接受的 SVG 可能携带 `<script>`、事件处理器和 `foreignObject`，在渲染之前必须先在服务端做净化。
Frequently Asked Questions
SVG 优化能减少多少文件体积？
通常能减少 20–70%。从 Inkscape、Adobe Illustrator 或 Figma 导出的 SVG 含有大量编辑器元数据、注释和冗余属性。一个 50KB 的导出 SVG 优化后往往只有 10–20KB——这对图标精灵图是关键改进。
优化会破坏我的 SVG 动画吗？
有可能。本优化器会删除它没看到被 url(#id) 或 href="#id" 引用的 id 属性，因此通过 ID 定位元素的 CSS 或 JavaScript 可能不再匹配。基于 class 的 CSS 动画和文件内部的 SMIL 不受影响。在替换带动画的 SVG 之前请先检查输出。
压缩和优化有什么区别？
压缩只去掉空白和注释。优化还会改写内容：丢弃编辑器元数据、把简单的样式属性提升为表现属性、删除未被引用的 ID。本工具两者都做。它不会合并路径、折叠分组或把图形转成路径——那是 SVGO 的工作。
How to Use SVG Optimizer
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.