图片工具 · 格式转换

SVG 优化

SVGO 浏览器版

✓本地处理 · 不上传 ✓免费 · 无需登录 ✓无次数限制累计 69 次使用

第一节

关于本工具

About

从 Figma 导出的 SVG 里，常常藏着 Illustrator 残留的空标签、重复的组、冗余的 viewBox 声明——这些对渲染没用，却让文件体积平白大出 30% 以上。拖入这个工具，它调用 SVGO 核心规则（删除无用元素、合并路径、简化数字精度），逐个节点清理，输出一份清洗过的代码。处理全在浏览器本地进行，SVG 不会被上传到任何服务器。

使用场景

壹

前端构建提速

电商大促前夜，前端工程师小陈要合入 20 多个 SVG 图标，但每个文件里都残留着 Illustrator 导出的冗余属性（空分组、无效 viewBox、重复样式）。手动删改一个图标要 5 分钟，20 个就是 100 分钟——而促销页面必须在 2 小时内上线。用本工具批量粘贴源码，SVGO 自动清理无用节点和属性，单个文件从 12KB 压缩到 3KB，20 个图标 3 分钟搞定，构建产物体积减少 70%，页面加载快了一截。

贰

印刷厂拒收大文件

品牌设计师老李给客户做了 8 个 SVG 版式方案，每个文件里嵌了高精度渐变和阴影，单个文件 800KB。印刷厂说「超过 200KB 的 SVG 不收，RIP 会崩」。老李用本工具逐一粘贴优化：SVGO 把 16 进制色值合并、移除未使用的 defs、精简路径精度，8 个文件全部压到 150KB 以内，印刷厂一次通过，省了来回发邮件改格式的半天时间。

叁

Sketch 导出文件过脏

UI 设计师小林从 Sketch 导出 40 个 SVG 图标给开发，但每个文件都带了一堆「Sketch 专属元数据」——图层 ID、未使用的符号、空矩形。开发反馈「代码里塞了 300 行无用标签，没法用」。小林把每个 SVG 源码复制进本工具，SVGO 一键移除所有 Sketch 残留元数据，文件从平均 15KB 降到 4KB，开发直接复制粘贴进组件库，零沟通成本。

肆

老旧 SVG 图标库瘦身

运维工程师老赵接手一个 5 年前的项目，assets 目录下躺着 200 个 SVG 图标，总大小 8MB。这些图标用旧版 AI 导出，里面塞满了废弃的命名空间、重复的渐变定义、无意义的 transform。老赵写了个脚本批量读取文件内容，逐个粘贴到本工具优化后再写回。200 个图标从 8MB 压缩到 1.2MB，项目构建时间从 40 秒降到 12 秒，部署包大小也减了一半。

伍

地图 SVG 精度降级

地理信息工程师小周要在一个移动端 H5 页面上展示全省 100 个区县的轮廓 SVG，原始数据来自 GIS 导出，每个区县边界有上万个坐标点，单文件 300KB。手机浏览器渲染 100 个这样的 SVG 直接卡死。小周用本工具把路径精度从 6 位小数降到 2 位，并启用 SVGO 的「cleanupNumericValues」插件，100 个文件从 30MB 压缩到 2.5MB，手机端滚动流畅，边界形状肉眼几乎看不出变形。

第二节

使用指南

Getting Started

使用步骤

1拖拽或点击上传 SVG 文件，页面顶部显示文件名与原始大小
2在「精度滑块」上拖动选择压缩强度（0-7 级），右侧预览区同步显示优化后的图形
3勾选「移除 viewBox」或「保留元数据」等开关，预览区即时更新效果
4点击「下载」按钮，浏览器自动保存优化后的 .svg 文件，文件名末尾追加「-min」

输入输出示例

输入	输出	说明
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="#ff6600"/></svg>	<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="#f60"/></svg>	常规：SVGO 将 #ff6600 压缩为 #f60（3 位十六进制），验证颜色简写优化
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect width="200" height="200" fill="white"/><text x="10" y="30" font-family="Arial" font-size="20">Hello</text></svg>	<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect width="200" height="200" fill="#fff"/><text x="10" y="30" font-family="Arial" font-size="20">Hello</text></svg>	常规：white → #fff，保留文本内容，验证属性值标准化
<svg xmlns="http://www.w3.org/2000/svg"><g id="layer1"><path d="M10 10 H 90 V 90 H 10 Z" fill="none" stroke="black"/></g></svg>	<svg xmlns="http://www.w3.org/2000/svg"><path d="M10 10H90V90H10Z" fill="none" stroke="#000"/></svg>	常规：移除无用 <g> 分组，压缩路径命令（去掉空格），black → #000
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="red" fill-opacity="0.5"/></svg>	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="red" opacity=".5"/></svg>	边界：fill-opacity 合并为 opacity，且去掉前导 0（.5 而非 0.5），验证小数优化
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="url(#grad)"/><defs><linearGradient id="grad"><stop offset="0%" stop-color="#000"/><stop offset="100%" stop-color="#fff"/></linearGradient></defs></svg>	<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="url(#grad)"/><defs><linearGradient id="grad"><stop offset="0" stop-color="#000"/><stop offset="100" stop-color="#fff"/></linearGradient></defs></svg>	边界：百分比单位在 stop offset 中被去掉（0 而非 0%），但 width/height 的 100% 保留，验证单位处理差异
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle cx="25" cy="25" r="24" fill="#000000"/></svg>	<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle cx="25" cy="25" r="24" fill="#000"/></svg>	易错：#000000（6 位）压缩为 #000（3 位），但 #aabbcc 不会压缩（无法简写），验证 6 位转 3 位的条件
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="#123456"/></svg>	<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="#123456"/></svg>	易错：#123456 无法简写（非重复对），输出不变，验证 SVGO 不会强行压缩不可简化的颜色

常见错误对照

1.保留无用 `<defs>` 和 `<use>` 引用

✗ 错误原始 SVG 包含 `<defs><path id="a" d="..."/></defs><use href="#a"/>`，优化后未合并

✓ 修复直接内联 `<path d="..."/>`，删除 `<defs>` 和 `<use>`

SVGO 默认 cleanDefs 和 removeUnusedDefs 会移除未引用的 defs，但若 use 引用存在则保留；手动内联可消除冗余引用，减少文件体积。

2.保留空 `<g>` 组标签

✗ 错误优化前：`<g id="layer1"><path d="..."/></g>`，优化后仍保留 `<g></g>`

✓ 修复优化后直接输出 `<path d="..."/>`，无多余分组

SVGO 的 removeEmptyAttrs 和 collapseGroups 插件默认开启，但若组无属性且仅含一个子元素，应自动折叠；若未生效，需检查插件配置或手动删除空组。

3.未清理编辑器生成的元数据

✗ 错误SVG 头部残留 `` 或 `sodipodi:namedview` 属性

✓ 修复移除所有注释和 sodipodi/inkscape 命名空间属性

SVGO 的 removeComments 和 removeEditorsNSData 插件默认开启，可自动删除；若关闭则需手动清理，否则增加冗余字节。

4.保留无效或重复的 `xmlns` 声明

✗ 错误`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`，但未使用 xlink

✓ 修复`<svg xmlns="http://www.w3.org/2000/svg">`

SVGO 的 removeUnusedNS 插件默认开启，会移除未引用的命名空间；若手动保留无用 xmlns，浪费字节且可能触发 SVG 解析警告。

5.未合并重叠的 `<path>` 命令

✗ 错误`<path d="M0,0 L10,0 L10,10 Z M0,0 L5,5 L0,10 Z"/>` 包含两个独立子路径

✓ 修复合并为单一连续路径：`<path d="M0,0 L10,0 L10,10 L0,10 Z"/>`

SVGO 的 mergePaths 插件默认开启，但仅合并相邻且无样式冲突的路径；若子路径有不同 fill/stroke，需手动合并或调整样式。

6.保留冗余的 `stroke-width` 默认值

✗ 错误`<path stroke-width="1" d="..."/>`，而 SVG 默认 stroke-width 就是 1

✓ 修复`<path d="..."/>`，省略默认 stroke-width

SVGO 的 removeUselessStrokeAndFill 插件会移除等于默认值的 stroke/fill 属性；若未开启，手动删除可减少属性数量。

7.未转换 `<style>` 内联为属性

✗ 错误`<style>.cls-1 { fill: red; }</style><path class="cls-1" d="..."/>`

✓ 修复`<path fill="red" d="..."/>`，删除 `<style>`

SVGO 的 inlineStyles 插件默认开启，会将类选择器样式转为内联属性；若保留 style 块，浏览器需额外解析 CSS，且增加文件大小。

8.保留不必要的 `viewBox` 精度

✗ 错误`viewBox="0 0 100.000000 100.000000"`

✓ 修复`viewBox="0 0 100 100"`

SVGO 的 cleanupNumericValues 插件默认将数字截断到小数点后 3 位；但 viewBox 中的尾随零不会自动去除，需手动精简以减少字符数。

第三节

工作原理

How It Works

核心公式

优化后大小 = 原始大小 × (1 - 压缩率%)

变量说明

原始大小优化前 SVG 文件的字节数
压缩率SVGO 移除冗余后节省的百分比

示例

原始 SVG 文件 12,800 字节，SVGO 移除无用属性与元数据后压缩率为 35%：优化后大小 = 12,800 × (1 - 0.35) = 12,800 × 0.65 = 8,320 字节，文件体积减少约 4.5 KB。

用户输入本地处理输出结果

第五节

常见问题

Q & A

问SVG 文件拖进去没反应，是格式不对还是浏览器问题？＋

答

最常见原因是 SVG 文件本身不规范——比如用了非标准的 XML 头部、内嵌了 base64 图片，或者根标签不是 <svg>。本工具基于 SVGO 在浏览器端解析，对标准 SVG 支持最好。如果文件拖拽没反应，可以尝试用文本编辑器打开 SVG，确认第一行是 <?xml version="1.0" encoding="utf-8"?> 且根元素为 <svg ...>。另外，文件超过 10MB 也会因浏览器内存限制无响应，建议先拆分或压缩后再上传。

问优化后文件反而变大了，怎么回事？＋

答

这通常发生在 SVG 本身已经非常精简（比如只有几个路径节点）的情况下。SVGO 的某些插件（如清理属性、合并路径）在处理极小文件时，可能会因为添加了命名空间声明或标准化结构而增加少量字节。另外，如果原文件使用了大量内联样式而非属性，SVGO 的默认配置可能不会压缩这些样式。本工具默认开启所有安全优化项，遇到反大时可以尝试关闭“清理无用属性”或“合并路径”选项，只保留“移除空格换行”来对比效果。

问这个工具会上传我的 SVG 文件到服务器吗？＋

答

不会。本工具是纯浏览器端实现（FE），所有 SVG 文件的读取、解析、优化都在本地完成，不会将文件内容发送到任何服务器。即使断网，只要页面已加载完成，优化功能依然可用。你可以通过浏览器的开发者工具（F12 → 网络面板）自行验证，优化过程中不会有任何网络请求。

问为什么优化后有些颜色变了或者图形消失了？＋

答

这通常是 SVGO 的“清理样式”或“合并路径”插件误判导致的。比如，某些 SVG 用 <use> 标签引用外部定义的渐变或图案，优化时可能被错误移除。建议先关闭“移除隐藏元素”和“清理样式”两个选项，只保留“移除空格”和“压缩数字精度”进行基础优化。如果问题依旧，可以对比原文件和优化后文件的代码差异，手动恢复被误删的引用部分。

问优化后的 SVG 在电脑上看着正常，放到手机上就变形了，怎么避免？＋

答

检查 SVG 根标签是否缺少 viewBox 属性。如果只有 width 和 height（比如 width="800" height="600"），没有 viewBox="0 0 800 600"，那么在不同屏幕尺寸下 SVG 不会自适应，而是固定像素显示。本工具优化时默认不会添加 viewBox，所以如果原文件本身缺失，优化后依然缺失。建议在优化前先用文本编辑器补上 viewBox 属性，或者使用本工具的“添加 viewBox”选项（如果提供）来自动补全。

问SVG 里的文字优化后变成乱码或者不显示了，怎么解决？＋

答

这通常是因为 SVG 中使用了系统字体或 web 字体，而优化过程移除了 @font-face 声明或 font-family 属性。本工具默认不会移除字体相关属性，但如果开启了“清理无用属性”，可能会误删 font-family。解决方法是：在优化前，将 SVG 中的文字转换为路径（使用矢量软件如 Illustrator 的“创建轮廓”功能），这样文字就变成了纯图形，不会再依赖字体文件。或者，在优化时手动关闭“清理无用属性”选项。

问这个工具和在线 SVG 压缩网站（比如 SVGOMG）有什么区别？＋

答

核心优化引擎都是 SVGO，所以压缩率基本一致。主要区别在于：1) 本工具完全离线运行，SVGOMG 也是浏览器端但部分旧版可能依赖 CDN 资源，本工具页面加载后断网也可用；2) 本工具默认配置更保守，倾向于保留所有视觉元素，适合对精度要求高的场景（如图标、LOGO），而 SVGOMG 的默认配置更激进，压缩率更高但可能改变外观；3) 本工具不支持批量处理，单次只能优化一个文件。

问优化后文件里的数值小数点后面好多位，能精简一下吗？＋

答

可以。本工具优化时默认会对数值进行精度压缩，但为了兼容性，默认保留 3 位小数。如果希望更极致的精简，可以在设置中将“数字精度”调整为 2 或 1。注意：精度越低，文件越小，但可能引入微小的视觉偏移（比如线条位置偏差几个像素），对于高精度图标建议保留 3 位。如果原文件本身就是整数坐标，精度设为 0 也不会影响显示。

隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。