SVG 压缩优化

SVG 压缩优化

用 SVGO 在浏览器里压缩 SVG，去掉 Illustrator、Inkscape、Figma 等软件导出时附带的元数据、注释和冗余属性，精简路径数据和小数位，图形不变而文件更小。可以一次处理多个文件，也可以直接粘贴 SVG 代码。

在浏览器本地运行，输入的内容和文件都不会上传

小数位数

坐标保留的小数位。大多数图标保留 2～3 位肉眼看不出差别，位数越少文件越小，但细节可能变形。

多轮优化去掉 width/height（保留 viewBox）保留 ID

选择 SVG 文件

或把文件拖到这里（可多选）

或者粘贴 SVG 代码

优化后的 SVG

使用步骤

选择或拖入 SVG 文件（可多选），或者在下方粘贴 SVG 代码；也可以点「载入示例」看效果。
按需要调整小数位数和其他选项，结果会实时更新并显示压缩比例。
逐个下载优化后的文件，或点「全部下载（ZIP）」；粘贴的代码可以直接复制。

参数说明

小数位数: 坐标和数值保留的小数位，默认 3。图标一般 1～2 位也看不出差别；精细的插画和地图建议保留 3 位以上。
多轮优化: 反复运行优化直到文件不再变小，通常能再省几个百分点，处理时间稍长。
去掉 width/height: 只保留 viewBox，SVG 会随容器缩放，适合在网页里用 CSS 控制尺寸。
保留 ID: 默认会删除没有被引用的 ID、缩短其余 ID。如果外部 CSS、JavaScript 或其他文件通过 ID 引用 SVG 中的元素，请勾选。

示例

优化前（Inkscape 导出，789 字节）中包含 XML 声明、注释、metadata、编辑器专用属性和很长的小数；优化后（248 字节）：

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><circle cx="60" cy="60" r="50" style="fill:#0f766e;fill-opacity:1;stroke:none"/><path d="m40 62 14 14 28-30-6-6-22 24-8-8Z" style="fill:#fff;stroke:none"/></svg>

常见问题

压缩后画质会下降吗？

SVG 是矢量图，优化只删除不影响显示的内容，并把数值四舍五入到设定的小数位。默认设置下肉眼看不出差别；如果图形出现变形，把小数位调大即可。

能减小多少？

取决于导出软件。设计软件导出的 SVG 通常能减小 30%～70%，示例文件从 789 字节减到 248 字节；已经优化过的 SVG 变化不大。

为什么动画或脚本失效了？

如果 SVG 的样式或脚本通过 ID 选择元素，请勾选「保留 ID」。

文件会上传吗？

不会。SVGO 在浏览器中运行，文件只在本地读取和处理。