​SVGOMG压缩清理SVG图标

2026-11-09 ​SVGOMG

SVGOMG 工具总结

地址：https://jakearchibald.github.io/svgomg/jakearchib... SVGOMG 是浏览器端可视化 GUI 工具，底层基于 SVGO v4.0.0，本地浏览器运算，不上传文件到服务器，用来压缩、清理 AI/Figma 导出的 SVG 图标，大幅减少文件体积SVGOMG。

一、全局设置 Global settings

Show original：分屏对比「原始 / 优化后」预览，检查图形是否变形

Compare gzipped：显示 gzip 压缩后实际网络传输大小（网页真实下载体积）

Prettify markup：格式化换行缩进，方便阅读调试；生产环境关闭进一步缩小体积

Multipass：多次迭代压缩，直到无法继续精简，压缩率更高，耗时略长

Number precision / Transform precision：数字精度，图标推荐 2‑3 位；数值越低文件越小，过低会图标错位变形SVGOMG

二、核心功能（Features）分类

1️⃣ 清理编辑器垃圾（必开）

删除 doctype、XML 指令、注释、<metadata>、AI/Figma 编辑器私有命名空间数据

删除<title>、<desc>描述标签、无用enable‑background属性

清理属性多余空格、空标签、空容器、隐藏图层元素、内置脚本

2️⃣ ID、Defs 处理【⚠️精灵 symbol 图标重点】

Clean up IDs：自动重命名 id；使用<symbol>+<use>精灵图标的时候务必关闭，否则 id 被篡改，图标引用失效

Remove unused defs：删除没有被引用的 def 定义

Replace duplicate elements with links：重复图形用引用复用，减少代码

3️⃣ 路径 & 图形优化（压缩大头）

Round/rewrite numbers / Round/rewrite paths：坐标小数四舍五入，精简 path 路径指令，减少锚点

Collapse useless groups：删掉空的<g>分组标签

Shapes to paths：把矩形圆形等基础形状转为 path 路径（图标精灵视情况开关）

Merge paths：合并可合并路径，减少 path 数量；复杂图标开启，部分图形合并后会变色 / 出错，预览确认

Round/rewrite transforms：优化 transform 变换矩阵，简化变换代码

4️⃣ 样式与颜色

合并、内联、压缩 css 样式，移除默认值属性；压缩颜色写法；移除无用 stroke/fill 属性

Prefer viewBox to width/height：删掉固定 width/height，保留 viewBox，方便 CSS 控制大小（网页图标强烈建议开启）

5️⃣ 命名空间

Remove xmlns：删除 xmlns 命名空间；独立 svg 文件不能删；放在 defs 精灵内的 svg 片段可以删

Replace xlink with native SVG：把旧的xlink:href替换成现代标准href

三、👉 你做网页 symbol 图标精灵的推荐配置

场景：<symbol> + <use> 图标雪碧图（你的 SSCMS 网站）

✅ 打开：Show original（预览对比），Multipass，Prefer viewBox to width/height

✅ 精度：Number precision = 3

❌ 关闭 Clean up IDs（最重要！防止 symbol 的 id 被改掉引用失效）

❌ 关闭 Remove xmlns（外层 svg 根标签要保留命名空间）

✅ 其余清理注释、元数据、空组、路径精简全部打开

⚠️ 合并路径Merge paths优化完一定要看预览，防止图标细节丢失变形