更小的 SVG 文件,看起来一模一样
从 Illustrator、Figma、Inkscape 或 Sketch 导出的 SVG 带有大量浏览器根本不会绘制的内容:编辑器元数据、注释、隐藏图层、带八位小数的数字、层层嵌套的分组。本工具在你的浏览器中运行 SVGO(标准的 SVG 优化工具)来去除这些内容,并把结果与原图并排显示,让你确认除了大小之外什么都没变。
如何优化 SVG
- 1拖入一个或多个 SVG 文件、选择文件,或粘贴 SVG 代码。
- 2查看优化前后的预览,以及每个文件节省的大小。
- 3降低精度可让文件更小;如果曲线开始变形,就把它调高。
- 4逐个开启或关闭 SVGO 插件,例如移除 width 和 height,让 SVG 随 CSS 缩放。
- 5下载优化后的 SVG、复制代码,或把所有文件一次性打包成 ZIP 下载。
会去除哪些内容
- 编辑器数据
- 元数据、注释、XML 声明和 doctype,以及 Inkscape、Illustrator 和 Sketch 为自身添加的命名空间和属性。
- 冗余标记
- 空的分组和属性、默认值、隐藏元素、未使用的定义和 ID,以及只包裹单个元素的分组。
- 冗长的几何数据
- 路径数据改用相对命令和更少的位数重写,形状转换为更短的路径,并在可能时把变换合并到坐标中。
安全的默认设置,更激进的选项
默认设置就是 SVGO 自带的预设,其目标是让图像保持不变。额外选项走得更远,但改变的不只是大小:移除 width 和 height 会让 SVG 填满其容器,移除标题会让屏幕阅读器读不到它的名称,而移除 xmlns 只适用于以内联方式粘贴到 HTML 中的 SVG。
如需先把位图转换为 SVG,请使用图片格式转换,它可以把 SVG 直接发送到这里;如需嵌入结果,请使用图片转 Base64。
常见问题
- 这和 SVGO 或 SVGOMG 一样吗?
- 它运行的就是 SVGO 本身,也就是 SVGOMG 所用的同一引擎,使用其默认预设,并把相同的插件做成开关。一切都在你的浏览器中运行。
- 优化会改变我的 SVG 外观吗?
- 使用默认设置时不会。精度过低可能让细小的曲线变形,部分额外选项会改变尺寸行为或无障碍性——优化前后的预览会立即显示差异。
- 可以一次优化多个 SVG 文件吗?
- 可以。想拖入多少就拖入多少,设置只需改一次即对所有文件生效,再把它们一起打包成 ZIP 下载。
- 为什么要显示 gzip 后的大小?
- Web 服务器通常会用 gzip 压缩后再发送 SVG,所以这个数值更接近访客实际下载的大小。
- 我的文件会被上传吗?
- 不会。SVGO 在你的浏览器中运行,文件从不离开你的设备。