SVG 优化工具

在 SVG 进入组件、图标集或静态资源包之前,先把代码整理干净。

优化设置

数值精度2 位小数

较低精度可进一步缩小文件,但过度四舍五入可能让 path 变形。2 或 3 是不错的默认值。

原始
无预览
优化后
无预览
输出代码

SVG 优化如何运作

移除不影响渲染的数据

设计工具导出的文件常包含 metadata、注释、编辑器命名空间和看不见的标签。这些内容会增加体积,但通常不会改变画面。

降低 path 精度

像 10.5432109 这种坐标,常能四舍五入到 10.54 而看不出差异,尤其是小尺寸图标。

上线前先检查

当 viewBox、fill、stroke、ARIA label 和重要 ID 会影响渲染、样式、动画或无障碍信息时,优化应保留它们。

常见问题

优化后 SVG 会变模糊吗?

不会。SVG 是矢量格式,优化只是修剪代码,不会把图片栅格化。主要风险是 path 数值四舍五入太激进。

为什么优化后 SVG 有时反而更大?

如果原始文件已经压得很紧或手动优化,可能移除的内容可能很少。这种情况下输出大小可能接近,甚至偶尔稍大。

支持批量优化吗?

这页适合单个文件检查和调整。批量优化请在构建流程中使用 SVGO 这类工具。

SVG 优化会弄坏动画或样式吗?

有可能。如果优化器移除 CSS 或 JavaScript 依赖的 ID、class、metadata,或把精度降得太低,就可能出问题。互动 SVG 请预览结果并保留重要属性。

装饰性 SVG 需要无障碍标签吗?

装饰性 SVG 通常可以对辅助技术隐藏。有信息意义的图标和插图应保留清楚的 title、label 或周边文字。