SVG 优化压缩器, 去注释 / metadata / 空属性 / 圆角小数, 合并无用 group, 100% 浏览器本地不上传, 平均能压 30-60%。
- 本地处理
- 分类 图片
- 适合 发布前把图片尺寸、格式或体积调到合适范围。
单个 .svg, 上限 2 MB。任何字节都不会出标签页。
优化项
这个工具能做什么
100% 浏览器内运行的 SVG 优化压缩器, 用浏览器自带的 DOMParser 把你的 SVG 重新解析成 DOM 树, 然后跑 10 条互相独立的清理流程, 每条都可以单独开关, 让你一眼看出哪条优化省了多少字节。不依赖 svgo、不需要 Node、不上传任何字节: SVG 从剪贴板或者 .svg 文件 进文本框, 解析、改写、再序列化, 完事。结果会显示压缩前后的字 节数、节省百分比, 还有左右并排的渲染预览让你确认视觉没变。三 种导出方式: 复制优化后的代码、下载 .svg, 或者一键复制成 base64 dataURL 直接塞进 CSS background 或者 Markdown 图片引用。常见 Figma / Illustrator / Inkscape 导出能压 30–60%; 纯代码画的图 标默认设置下经常能压 70% 以上, 小数精度收一收、空 id 去一 去, 体积自然瘦下来。整个工具约 25 KB JS, 缓存之后离线也能用。
工具细节
- 输入
- 文件 + 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 下载
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 25 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 图片 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
SVG 优化压缩器 适合怎么用
适合在网站、店铺、社媒、表单上传或素材交付前处理图片。
适合处理的图片任务
- 发布前把图片尺寸、格式或体积调到合适范围。
- 分享照片前检查 EXIF、GPS 和其他隐藏元数据。
- 不上传私有素材,也能生成可发布的图片变体。
图片检查项
- 先按真实展示尺寸改图,再压缩。
- 转格式后检查透明度、动画和色彩配置是否变化。
- 图片可能含隐私时,先检查或清理元数据。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
提交 Figma 图标前先减个肥
Figma "复制为 SVG" 出来的一个三角形要 1.8 KB, 因为每个坐 标都是 6 位小数, 每条 path 都带着 inline `style="fill:#FFFFFF;fill-opacity:1"`。粘进来, 默认设置一 按, 结果面板显示 `1.8 KB → 410 B, 省 77%`。复制结果, 粘 回图标组件文件, 提交。页面体积下降, 视觉零变化。
Inkscape 导出图给开源 README 减重
Inkscape 给的 14 KB SVG, 里面是 `inkscape:label`、 `sodipodi:nodetypes`、一个 `<rdf:RDF>` 元数据块、一个只 套了一个形状的图层 group、还有 7 个没人引用的 `id="path"`。粘进来: 14 KB → 2.6 KB。GitHub README 上那 个三角形画面没差别, 但是 PR 里的 diff 突然可读了, 不再是 一坨 200 行属性。
把 SVG 图标用 dataURL 直接内联到 CSS
想在 CSS `::before` 伪元素里塞一个自定义对勾。把 SVG 粘进 来, 优化, 然后 "复制为 base64 dataURL"。出来的整条 `background-image: url("data:image/svg+xml;base64,…")` 短到能在屏宽里两行写完。少一次 HTTP 请求, 少一份要部署的 文件, 加载时也不会出现图标空一下再出现的闪烁。
多图标 symbol sprite 上线前清理
设计系统有 80 个图标拼在一份 symbol sprite 里。把 "去未引 用 id" 关掉 (因为你确实在用 `<use href="#icon-foo">` 引 用它们), 其他都开。sprite 从 92 KB 压到 41 KB; sodipodi 图层属性、重复的 `style=""` 全去掉, 但每个 symbol 的 id 原样保留, `<use>` 引用照样工作。
落地页头图 SVG 上线前的最后一步
插画师从 Illustrator 导出的 60 KB 头图。默认设置压到 38 KB。把小数精度从 3 降到 2 (插画本来就不需要亚像素级精 度), 结果变成 31 KB。下方左右并排预览看曲线一模一样。 页面 4G 下 LCP 提前约 80 毫秒, Lighthouse 分还能再涨 2 分。
常见踩坑
忘了 `<use href="#icon-foo">` 需要这个 id 还在。如果你的 SVG 是 symbol sprite, 把 "去未引用 id" 关掉, 引用扫描只看同一份文件里的引用, 外部引用会被静默删掉。
复杂曲线把小数精度调成 0。落在像素网格上的 logo 选 0 没问题, 但手绘插画会肉眼可见地变成多边形, 上线前一定要看下方左右并排预览。
同一份 SVG 反复优化。默认设置本身是幂等的, 但如果你中途切换了优化项, 第二次跑可能会丢掉你本来想留的内容 (比如第二次跑 "去 metadata" 开着, 屏幕阅读器要的 `<title>` 就没了)。
隐私说明
每一份 SVG 都是用浏览器自带的 DOMParser 解析, 在内存里修改, 然后 重新序列化, 整套流程都在你标签页里完成。优化时打开 DevTools 看 Network, 请求数从头到尾是 0。不用登录、没有配额、不会有任何字节 流出去。页面缓存之后离线也能用。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。