EN← 返回主页

SVG

SVG 优化与预览

粘贴或拖入 SVG 文件,本地移除注释与编辑器冗余、压缩数字精度,实时预览并生成 data URI,全程不上传。

SVG 源码

输入后自动优化;注释、metadata、inkscape/sodipodi 属性、空 defs/g 会被移除。

关于SVG优化压缩

从 Figma、Illustrator、Inkscape 导出的 SVG 通常带有大量冗余:编辑器私有属性(inkscape:、sodipodi:)、metadata、注释、超长小数和多余空白,这些对渲染毫无作用却显著增大体积。本工具用浏览器内置的 DOMParser 在本地解析清理,可选择保留或移除 title/desc,按 1-3 位压缩数字精度,实时预览优化效果(棋盘/白/黑三种背景查看透明区域),展示前后体积对比,并一键生成 encodeURIComponent 与 base64 两种 data URI 便于内嵌到 CSS 或 HTML。

常见问题

SVG 优化会不会改变图形显示效果?

本工具只移除注释、metadata、编辑器私有属性和空容器,这些不参与渲染,视觉上无损。数字精度压缩理论上有微小几何偏差,2 位小数对图标级 SVG 肉眼不可辨;若是超大画布或精细图形,可把精度调到 3 位并对比预览确认。

data URI 该用 encodeURIComponent 还是 base64?

SVG 是文本,encodeURIComponent 版通常比 base64 更小(base64 会膨胀约 33%),且 gzip 后差距更明显,CSS background-image 内嵌推荐前者。base64 版兼容性更保险,适合某些对特殊字符敏感的场景(如部分邮件客户端)。

要不要移除 SVG 里的 title 和 desc?

看用途:装饰性图标可以放心移除(建议同时在 HTML 里加 aria-hidden="true");如果 SVG 承载实际内容且需要无障碍支持,title/desc 是屏幕阅读器的重要信息,应取消勾选保留它们。