SVG 优化器

SVG 优化器 是什么？

SVG 优化器是一款免费的浏览器工具，面向需要在发布前精简手写或导出 SVG 的网页设计师、图标作者和前端开发者。矢量编辑器会添加看不见的负担：XML 注释、元数据块、Inkscape/Sodipodi/Illustrator 属性、多余的小数、无效的 transform、包裹分组，以及无人引用的 ID 和 defs。在“设置”中逐项开关各清理项，然后粘贴标记或拖入 .svg 文件，观察原始与优化后的渲染并排更新，并查看优化前、优化后、已节省、Gzip 和 Brotli 统计来确认收益。复制结果或下载为 .min.svg。可用它为内联图标、雪碧图、徽标和插画瘦身。

如何使用 SVG 优化器

1. 粘贴你的 SVG，或拖放/上传 .svg 文件——标记会填入输入框。
2. 打开“设置”，按需开关各清理项：坐标四舍五入、删除注释、元数据和编辑器属性、空分组、未使用的 ID 和 defs、合并 transform、压缩内联样式、缩短十六进制颜色、删除默认值、压缩空白。
3. 若开启坐标四舍五入，设置精度（0-5 位小数）。
4. 并排对比原始与优化后的渲染，确认图形依然正确。
5. 查看优化前、优化后、已节省、Gzip 和 Brotli 统计，了解真实的体积收益。
6. 复制优化后的 SVG，或下载为 .min.svg 文件。

示例

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

常见问题

优化器到底会删除哪些内容？

在开启相应开关时：XML 注释，<metadata>、<title> 和 <desc> 元素，编辑器命名空间属性（Inkscape、Sodipodi、Illustrator），空分组，无人引用的 ID 和无引用的 <defs>。它还能对数值属性和路径数据四舍五入、合并无效 transform、压缩 style 属性和 <style> CSS、缩短十六进制颜色（#ffffff→#fff），并删除如 fill-opacity="1" 之类的默认表现属性。

对坐标四舍五入会改变 SVG 的外观吗？

四舍五入到较低精度可能使点移动极小的单位分数，通常肉眼不可见但更小。需要精确几何时可提高精度（最高 5 位小数），或关闭坐标四舍五入以保留原始数值。

我可以加载文件并预览结果吗？

可以。拖放或上传 .svg 文件（或粘贴标记），原始与优化后的渲染会并排显示，便于发现任何出错之处。然后复制输出或下载优化后的 .min.svg——不会上传，文件仅在本地读取。

Gzip 和 Brotli 数字是什么意思？

Gzip 大小是通过在浏览器中实际压缩优化后的 SVG 得到的，反映 gzip 连接上传输的真实字节。Brotli 数字是由该 gzip 大小推算的估算值（brotli 通常把文本压得略小）；真正的 brotli 编码器过于庞大无法打包，因此以波浪号（≈）标注。

我的 SVG 会被上传到任何地方吗？

不会。解析、清理、大小测量和序列化都使用浏览器内置的 DOMParser 在本地完成。任何内容都不会发送到服务器，因此工具可离线使用，你的作品也保持私密。