通过移除元数据、注释及冗余属性来优化 SVG 文件。
优化 SVG 文件以减少有效负载大小,删除不必要的元数据,并保持图标、插图和 UI 资源的渲染保真度。
它通过剥离冗余节点并在安全的情况下最小化路径数据来压缩 SVG 标记。
它帮助团队缩小图标集和内联 SVG 片段以加快页面加载速度。
它会提示可优化机会,同时保留设计工作流所需的语义结构。
原始设计器导出
<svg width="512" height="512" ...>...</svg>
图标集示例
<svg viewBox="0 0 24 24"><path d="..."/></svg>
插图示例
<svg><defs>...</defs><g>...</g></svg>
缩小 SVG
<svg viewBox="0 0 24 24"><path d="M2 2h20v20H2z"/></svg>
大小增量
之前:14.2 KB,修改后:5.8 KB(减少 59%)
验证说明
验证深色/浅色主题和高 DPI 显示器中的优化输出。
删除重要属性
禁用所需 ID 和类的主动清理选项。
更改图标对齐方式
在优化过程中保持 viewBox 和坐标系值不变。
辅助功能标签丢失
保留需要辅助元数据的标题和 desc 节点。
渐变渲染中断
保留 defs 引用,并避免缩小后发生 ID 冲突。
SVG 优化器 应作为交付流程中的快速校验步骤,在提交、发布和交接前都建议执行一次。
通常会缩小多少尺寸?
简单的图标通常会显着缩小,而复杂的艺术则因源质量而异。
优化会改变外观吗?
不应该,但总是在最终发布之前进行视觉比较。
优化后的 SVG 以后仍可编辑吗?
可以,但高度压缩后的标记通常不如原始导出易读。
我应该优化 CI 中的每个 SVG 吗?
对于生产资产,建议结合视觉回归检查一起执行。