实用工具

SVG 压缩优化

用 SVGO 给 SVG 瘦身——去掉编辑器元数据、精简坐标、合并路径——下载前先预览效果。

浏览器本地运行图片与颜色2.3万
免费

输入

0 B

结果

结果会显示在这里。

从 Illustrator、Figma、Sketch 或 Inkscape 导出的 SVG 里有大量浏览器根本用不上的东西:编辑器元数据、空的分组、默认属性值,还有精确到小数点后六位的坐标。SVGO 是大多数 SVG 构建工具背后的优化器,用它的 preset-default 插件集就能把这些全部清掉。贴入 SVG 代码,就能得到优化后的文件、一张用来确认外观没变的渲染预览,以及节省的体积。SVGO 4 默认不再删除 viewBox 和 <title>,因为两者分别关系到缩放和无障碍,这里的选项让你自己决定。

它是怎么工作的

  • 小数位数决定路径和变换里每个数字的精度:图标尺寸下 3 位看不出差别,1 位或 0 位可能让细节变形。
  • 多轮优化会反复运行插件直到文件不再变小,能抓到那些在前一轮之后才可以合并的路径。
  • 移除宽高时会保留 viewBox,SVG 就能随容器缩放——用 CSS 控制尺寸的图标正需要这样。
  • 预览通过 <img> 标签加载 data URL,SVG 里即使带有脚本,也不可能在本页面执行。

你的数据去了哪里

哪也没去。本工具完全在你的浏览器里运行:你粘贴的文本由页面处理,不会传输到任何服务器,也不会写进任何日志。

本工具免费且无需登录,运行结果只存在于你当前的页面里,不会被保存到任何地方。

它要花多少

本工具完全免费,不需要登录,也不消耗积分。

常见问题

为什么要保留 viewBox?
viewBox 定义了让 SVG 能够缩放的坐标系。没有它,用 CSS 给 SVG 设新尺寸时图形会被裁切,而不是等比缩放。旧版 SVGO 在宽高和 viewBox 一致时会删掉它,4.0 版不再这么做,保留它才是正确的默认值。
优化后外观会变吗?
preset-default 的设计目标是视觉无损,预览可以帮你确认。真出现偏移,通常是给细节多的小图标设了太低的小数位数,调到 3 位以上即可。ID 也会被缩短,只有文件外部的 CSS 或 JavaScript 引用了这些 ID 时才会受影响。
<title> 元素会保留吗?
会。SVGO 4 把 removeTitle 移出了默认预设,因为屏幕阅读器会读出内联 SVG 的 title。如果这张图纯属装饰,可以自己删掉 title,并在使用它的地方加上 aria-hidden。
内嵌了位图或字体的 SVG 呢?
内嵌的 base64 位图和字体会原样保留,SVGO 只优化它们周围的矢量标记。一个主要内容是内嵌 PNG 的文件几乎压不下来——请单独压缩或转换那张位图,或者干脆导出真正的位图格式。

背后的开源项目

本工具运行在 svg/svgo 之上,以 MIT 许可发布。如果你需要在自己的程序里实现同样的能力,直接用这个库。

svg/svgo

也常被称作

  • svg压缩
  • svg优化
  • svgo在线
  • 在线svg压缩
  • svg文件瘦身
  • svg代码优化