实用工具
输入
结果
结果会显示在这里。从 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代码优化