SVG 优化
去除 SVG 中编辑软件残留的冗余内容并压缩体积,可控制坐标精度、viewBox 和 id 处理,全部在浏览器内完成。
仅在浏览器中处理免费使用
把文件拖到这里,或点击选择
SVG 文件最大 5MB。
文件在浏览器本地处理,不会上传到服务器。
反复处理直到不再变小。稍慢一点,也小一点。
加入换行和缩进,体积会变大。
仅当所有使用处都由 CSS 指定尺寸时才安全。
会破坏文件外部对这些 id 的引用。
文件在浏览器本地处理,不会上传到服务器。
使用方法
无需注册、无需安装,也没有使用次数限制,完全免费。
粘贴 SVG 或拖入文件,整理后的结果会与优化前后的体积一并显示。从 Figma、Illustrator、Sketch 导出的文件带有与图形无关的编辑器专用属性、注释和无用 id,一页中放上许多这样的图标,整体就会变得不必要地沉重。
体积减少最多的地方是坐标精度。编辑软件会把路径坐标写到小数点后好几位,而对一个按 24 像素绘制的图标来说,三位已经远超屏幕所能呈现的精细度。请一边调低一边看预览,继续调低,曲线最终会明显变得棱角分明。
删除 viewBox 默认关闭,除非你确定这个图标在所有使用处都由 CSS 指定尺寸,否则建议保持关闭。没有 viewBox 图形就无法缩放,而症状通常不是“显示得不对”,而是“完全不见了”。
缩短 id 同样默认关闭。它能省下一点体积,但只要有一处从文件外部引用了这些 id(无论是 CSS、脚本还是其他文档中的 use),该引用都会悄无声息地失效。
预览渲染的是优化后的 SVG 而非原文件,也就是说你看到的正是即将下载的内容。精度是否调得过低,除了与原图对照之外没有别的可靠判断方式。
文件不会离开浏览器。优化引擎本身也只在点击按钮时才加载,因此仅打开页面不会下载任何东西。