SVG 压缩

工具介绍

SVG 图标和插画常由设计软件(Illustrator、Figma、Inkscape 等)导出,里面夹带大量对显示毫无用处的内容:编辑器注释、metadata 元数据、专属命名空间属性、XML 声明与冗长空白。这些让文件体积虚高,内嵌网页或打包进项目时白白增加加载负担。

本工具把清理拆成一组可独立勾选的优化项:去注释、去 XML 声明与 DOCTYPE、去 metadata 与 title/desc、去 inkscape/figma 等编辑器属性、去空 g 组、折叠多余空白、移除未引用 id。默认项只清理不影响渲染的内容,图形原样保留;需要更激进时可开启「数值精度」,把小数坐标四舍五入到指定位数,在体积与精度间自行权衡。

每次压缩都显示前后体积与百分比,并把压缩前后并排预览。可粘贴代码或导入 .svg,完成后一键复制或下载,全程本地处理不上传。

使用方法

1. 把 SVG 代码粘贴到输入框,或点击右上角导入 .svg 文件。
2. 在「优化项」里逐项勾选要执行的精简(去注释、去声明、去元数据、去编辑器属性、去空组、折叠空白、移除未引用 id)。
3. 需要更激进的瘦身时勾选「数值精度」并设置保留小数位数。
4. 点击「压缩」查看前后体积对比与预览效果。
5. 复制结果或下载压缩后的 .svg。

常见问题

会改变 SVG 的显示效果吗?

默认开启的项(去注释、去 XML 声明/DOCTYPE、去 metadata、去编辑器属性、去空组、折叠空白)只移除不影响渲染的内容,图形本身保持不变。「数值精度」「移除未引用 id」属可选项,按需开启。

「数值精度」会不会把图形压坏?

该项默认关闭。开启后只对带小数的坐标数值做四舍五入到指定位数(整数与科学计数保持原样),位数留得越少体积越小、形变风险越高;建议保留 2 位,对精细图形可设 3~4 位或不开启。

「移除未引用 id」安全吗?

安全。工具会先扫描 url(#id)、href="#id"、动画 begin/end 等所有引用,只删除从未被引用到的 id,被 CSS 或脚本引用的 id 不会受影响;如有外部脚本按 id 取元素,可关闭此项。

去「编辑器属性」指什么?

Illustrator、Inkscape、Figma 等导出时会写入 inkscape:、sodipodi:、figma:、dc:/cc:/rdf: 等专属命名空间属性,以及 sodipodi:namedview 等节点,它们对网页渲染无用,移除可显著瘦身。

数据会上传吗?

不会。所有压缩都在浏览器本地完成,SVG 代码不会上传到任何服务器。

相关工具