SVG 优化器

SVG 优化器 是什么？

SVG 优化器是一款免费的浏览器内工具，面向需要在发布前精简手写或导出 SVG 的网页设计师、图标作者和前端开发者。矢量编辑器会添加大量看不见的负担：XML 注释、元数据块，Inkscape／Sodipodi／Illustrator 命名空间属性、多余的小数位，以及没有子元素的包裹分组。本工具使用浏览器自带的 DOMParser 解析你的标记，应用你启用的清理步骤，再序列化出更紧凑的 SVG。在“设置”中逐项切换各步骤，设定坐标四舍五入精度，并查看优化前、优化后和已节省统计来确认收益。可用它为内联 SVG 图标、雪碧图、徽标和插画瘦身，或在把标记粘贴进代码前整理混乱的格式。

如何使用 SVG 优化器

1. 把你的 SVG 源码粘贴或接入到输入框。
2. 打开“设置”选择要运行的清理项：坐标四舍五入、删除注释、删除元数据和编辑器属性、删除空分组。
3. 若开启了坐标四舍五入，设置精度（0-5 位小数）以在体积和精度之间取得平衡。
4. 查看优化前、优化后和已节省的大小统计，了解结果小了多少。
5. 从输出框复制优化后的 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"><g></g><circle cx="5" cy="5" r="3"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="3"/></svg>

常见问题

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

取决于你启用了哪些开关：XML 注释，<metadata>、<title> 和 <desc> 元素，编辑器专属命名空间属性（如 Inkscape、Sodipodi 和 Illustrator），以及不含任何子元素的分组（<g>）。它还能将数值属性和路径数据四舍五入到指定的小数位数。

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

四舍五入到较低精度可能使点位移动一个极小的单位分数，通常肉眼不可见，但能缩小文件。如果需要精确的几何形状，可提高精度（最高 5 位小数），或者完全关闭坐标四舍五入选项以保留原始数值。

它能保证生成最小的文件吗？

不能。它执行的是安全的结构性清理（注释、元数据、编辑器属性、空分组、坐标四舍五入），但不会合并路径、压缩样式或应用重量级库可能进行的全部变换。对于大多数图标和导出文件，已节省统计中显示的收益相当可观。

如果我的 SVG 无效会怎样？

如果标记无法被解析为 SVG，会显示一条错误信息且不生成输出。修正标记（例如让标签配对）后，结果会自动更新。

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

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