跳到内容
DevLab

✂️ SVG 优化

从 SVG 中删除元数据、注释、空白、编辑器标签并取整小数,大幅减小文件大小。

完全免费 无需注册 浏览器内完成 5 种语言 深色模式

预览

🔗 相关工具

📖 常见的坑

从 SVG 中删除注释、元数据与编辑器专有属性，压缩空白并对小数取整以减小体积，可输出为 CSS 的 data URI、HTML 的 img 标签、JSX 或 Vue。处理全部在浏览器内完成。有些东西可以安全删除，有些一删图就坏——尤其是 id，它可能被 <use>、clipPath 或渐变引用，因此不能机械地删掉。

情形 会发生什么 怎么处理
优化之后图形坏了 原因基本上有两个。其一是删掉了 id：<use xlink:href="#icon">、clip-path="url(#mask1)"、fill="url(#grad1)" 全都引用了 id，一旦丢失，图形就会消失或整块变黑。其二是小数取整过头：在小图标或细线上，仅仅保留一位小数就足以让坐标塌陷、形状扭曲。两者都会产生「体积小了，但画出来不一样」的结果，而只看数字会以为优化成功了。 小数保留两到三位即可——降到一位，用崩坏的风险去换那点字节并不划算。而且请务必把优化前后并排放着用眼睛比对（本工具的预览）——只看文件体积的数字来判断，是这项工作中最常见的失败。至于 id：若是被外部 CSS 或 JavaScript 引用的内联 SVG，就必须保留这些 id——SVGO 的 cleanupIds 同样默认开启，那里也会出现同一个问题。在同一页面放多个 SVG 时则要反过来当心：id 在页面内必须唯一，两个 SVG 用了相同的 id，后一个就会引用到前一个的定义。
删掉 title / desc，可访问性随之下降 在 SVG 中，<title> 扮演的是替代文本的角色——屏幕阅读器会朗读它。装饰性的 SVG 删掉无妨，但从有意义的图标（按钮内容、状态指示、图表）中删掉，就没有任何东西能说明这个按钮是干什么的了。纯图标按钮是最危险的情形：没有文字标签，若 <title> 曾是唯一线索，删掉它之后就只会被读成「按钮」二字。视觉上毫无变化，因此根本没有察觉的机会。 请按 SVG 承担的角色来判断。通过 <img> 加载时，alt 属性就是替代文本，因此 SVG 内部的 <title> 是多余的，删掉无妨。若是内联且具有含义，请保留 <title>，并加上 role="img" 与 aria-labelledby——写成 <svg role="img" aria-labelledby="t1"><title id="t1">保存</title>。若纯属装饰，请删掉 <title> 并加上 aria-hidden="true"——它等同于空的 alt，明确声明「无需朗读」比单纯删掉更好。判断标准是：如果这张图不存在，含义会不会改变。
转成 data URI 后反而变大了 Base64 必定增加约 33% 的体积，因此把 SVG 优化掉 30% 之后再做 Base64，大小基本又回到了原文件的水平。更糟的是，Base64 字符串几乎压不动 gzip：SVG 本是文本，正常情况下 gzip 能压掉 70% 左右，转成 Base64 就把这一优势扔掉了。以为「用 data URI 能减少请求所以更快」，实际却让传输量几乎翻倍——这是本流程中常见的反转。 若要把 SVG 做成 data URI，请用百分号编码而不是 Base64——写成 data:image/svg+xml,%3Csvg...。SVG 是文本，因此百分号编码比 Base64 更小，而且 gzip 依然有效。必须转义的只有 #、%、" 三个，其余可以原样放着（把 < 与 > 也转义会更保险，但并非必须）。data URI 只在几 KB 以内的图标上才划算；超过这个量级，普通的 <img> 或内联 SVG 因为能被缓存反而更快。data URI 是「想把一切收在样式表内」的手段，而不是速度优化。

最大的削减来自导出设置，而不是某个工具。Illustrator 与 Figma 默认导出的 SVG 含有大量编辑器元数据、图层名与冗余分组，但只要选择「最小化」或「SVG 1.1 配置文件」这类选项，这些内容压根就不会被写出——不产生它，比事后删除它更可靠也更快。若要使用大量图标，请合并成 SVG 雪碧图，而不是逐个优化——在请求数与总体积上都更划算。最后是安全：绝不要把从外部收到的 SVG 直接内联展开。SVG 是可以包含 <script> 与 onload 属性的 XML，内联出来就是 XSS。要显示用户上传的 SVG，请通过 <img src="..."> 加载——这条路径下脚本不会执行。若必须内联处理，请务必用 DOMPurify 的 SVG 配置进行净化。

📖 使用方法

  1. 1
    粘贴 SVG 或打开文件
    在左侧粘贴 SVG 代码或点击打开文件。
  2. 2
    选择优化选项
    勾选注释删除、元数据删除等选项。
  3. 3
    复制输出或选择格式
    右侧显示优化后的 SVG。可选输出格式。

❓ 常见问题

能减少多少大小?
Inkscape/Illustrator 导出的 SVG 通常可减少 20~60%。
删除 title/desc 会影响无障碍性吗?
用于内联无障碍图标时请保留 title 和 desc。
JSX 格式可以直接在 React 中使用吗?
是。JSX 格式会转换属性并将 class 替换为 className。
🐛 此工具出现问题了吗？

免费、无需注册。仅提供复现步骤也有帮助。报告将直接发送给运营者并用于改进。

※ 为复现问题,浏览器信息 (UA / 屏幕 / 语言 / URL) 将自动发送