DevToolbox

免费在线 SVG 优化工具

SVG 压缩 / 格式化工具——在线优化、压缩和清理 SVG 文件。移除 Inkscape / Illustrator 元数据、注释、空分组和多余属性,即时预览结果。免费,100% 客户端运行。

100% 客户端处理 · 数据永不离开您的浏览器

Optimization Options

Optimized output will appear here

使用说明 SVG 优化工具

将 SVG 代码粘贴到 输入 SVG 区域,选择优化选项,然后点击 优化 或按 Ctrl/Cmd+Enter

  • 删除注释 — 移除 <!-- ... --> 注释块。
  • 删除元数据 — 移除 Inkscape / Illustrator 嵌入的 <metadata> 元素。
  • 删除编辑器属性 — 移除 inkscape:*sodipodi:*data-name 属性及其命名空间声明。
  • 压缩空白 — 规范化属性值和标签间的多余空格与换行符。
  • 删除空分组 — 移除无子元素的 <g></g> 元素。
  • 四舍五入数字 — 降低路径坐标的小数精度(如 123.456789 → 123.46)。

统计栏显示原始大小与优化大小及节省比例。使用 格式化 将压缩的 SVG 美化输出。按 Ctrl/Cmd+K 清空。

常见问题

SVG 优化具体做了什么?

SVG 优化会移除渲染时不需要的数据:编辑器元数据、XML 注释、空容器元素、多余的命名空间声明和多余的空白符。还可以对路径数据中的精度过高的小数进行四舍五入,最终得到文件更小但浏览器渲染效果完全相同的 SVG。

为什么 Inkscape 或 Illustrator 导出的 SVG 包含这么多额外数据?

Inkscape 和 Adobe Illustrator 会嵌入私有命名空间属性(inkscape:*、sodipodi:*、ai:*)以及元数据块,用于保存编辑状态:图层名称、网格设置、字体信息和文档属性。这些在编辑器中必要,但对浏览器渲染毫无意义。

优化会改变 SVG 的外观吗?

本工具的选项设计为视觉无损。删除注释、元数据和编辑器属性不会改变渲染结果。将路径数字四舍五入到 2 位小数在常规显示尺寸下肉眼察觉不到(误差小于 0.01px)。建议在部署前始终预览输出效果。

路径数据精度为什么影响文件大小?

矢量绘图工具通常以 6–10 位小数导出路径坐标,而网页显示只需要 1–2 位小数。对于含有大量路径段的复杂插画,四舍五入可以显著减少字符数量。

安全优化和不安全优化有什么区别?

安全优化保留视觉输出:删除注释、元数据、编辑器属性和空分组。不安全优化可能改变外观:删除 viewBox 属性、修改被 CSS 覆盖的颜色,或删除 JavaScript 引用的 id 属性。本工具只应用安全优化。

与 SVGO 相比如何?

SVGO 是业界标准的 Node.js 优化器,拥有数十个插件,包括高级路径合并。本浏览器工具涵盖最具影响力的优化项,无需安装。对于生产构建流水线,推荐使用 SVGO 或 svgo Vite/webpack 插件;本工具适合处理单个文件。

相关工具