免费 SVG 优化器
这款 SVG 优化器可压缩单个 SVG 文件,并移除编辑器数据、注释和元数据。六个清理选项可随意开关,还能对比两个版本,然后下载。你的文件不会离开你的设备。
将 SVG 文件拖放到这里
或点击浏览。一次处理一个 SVG 文件
SVG 优化器会移除和保留什么
编辑器数据、注释、元数据和隐藏图形会被移除。viewBox、title 和颜色会保留,路径坐标也绝不会被取整。
压缩 SVG 并移除编辑器数据
优化器会移除 Inkscape、Illustrator 和 Sketch 的编辑器数据、元数据块、注释、XML 头以及多余的空白。统计栏会显示原始大小、新大小和节省的百分比。
- 已移除 Inkscape、Illustrator 和 Sketch 的编辑器数据
- 显示原始大小、新大小和节省的百分比
- 以你的文件名加 .min.svg 保存
自选要执行的 SVG 清理项
六个开关控制清理内容:移除元数据、移除注释、合并分组、清理 ID、移除隐藏元素和合并路径。默认全部开启,每次切换开关,SVG 都会重新优化。
- 六个开关,默认全部开启
- 每次切换开关后结果都会更新
- 关闭「清理 ID」即可保留你的 ID
并排视觉预览
原始 SVG 和优化后的 SVG 会在棋盘格背景上并排显示。下载前对比一下,就能发现缺失的图形或丢失的渐变。
原始代码与优化后代码
点击「显示代码对比」,即可并排阅读两个文件的代码。它显示的是各自的完整文本,而不是高亮改动,优化后的版本会排成一行。
基于 SVGO 4 构建
页面运行 SVGO 并开启多轮处理(multipass),在文件还能继续缩小时重复清理。它不会对路径坐标取整,也不会改写颜色,因此图形保持精确。
你的 SVG 留在你的设备上
你的文件在当前浏览器标签页中优化,并直接从中下载。系统会发送匿名使用统计,例如开启了哪些开关和文件大小范围,但不会发送你的 SVG 代码。
三步优化 SVG
添加你的 SVG。
把一个 .svg 文件拖到页面上,或点击浏览。编辑器会打开,并立即以全部六个选项开启的状态进行优化。
检查结果。
对比两个预览和节省的大小。如果有什么地方看起来不对,关闭某个选项,文件就会重新优化。
下载 SVG。
点击「下载」保存优化后的文件。文件会沿用你的文件名并在末尾加上 .min.svg,所以 logo.svg 会变成 logo.min.svg。
谁在使用 SVG 优化器
适合在网页上发布 SVG 并关注加载性能的开发者和设计师。
更快的网页
更小的 SVG 徽标和图标意味着浏览器需要加载的代码更少。在把 SVG 文件加入网站或应用之前先优化一下。
- 压缩从设计软件导出的首页大徽标
- 在内联到 HTML 之前清理导出的 SVG
- 上线前移除图标中的注释和元数据
设计软件导出文件
Inkscape、Illustrator 和 Sketch 会在每个文件中保存图层名称、编辑器设置和元数据。在把文件加入设计系统或代码仓库之前,先把它们移除。
- 移除 Inkscape 的图层名称和 sodipodi 设置
- 移除已保存 SVG 文件中的 Illustrator 数据块
- 在交给开发人员之前清理徽标
图表和示意图
保存为 SVG 的图表和示意图往往带有空分组、隐藏图层和很长的 ID。清理之后,文件更小,更便于存储、分享和嵌入网页。
- 移除导出图表中的空分组
- 删除编辑时遗留的隐藏图层
- 缩短示意图文件中的长 ID
常见问题
关于在线优化 SVG 文件的常见问题。
如何减小 SVG 文件的大小?
把 SVG 拖到本页面,优化器会移除编辑器数据、元数据、注释、隐藏图形和多余的空白。查看预览和统计栏中节省的大小,然后点击「下载」获取更小的文件。
我的 SVG 能缩小多少?
在我们的示例文件中,缩减幅度约为 1% 到 80%,取决于文件的来源。一个满是编辑器数据的 Inkscape 风格徽标缩小了 80%,而一个干净的 24 px 图标只缩小了 1%。嵌入 SVG 内部的照片不会变小。
优化 SVG 会改变它的外观吗?
通常不会。图形、颜色和路径坐标都会原样保留。风险在于「移除隐藏元素」,它会删除不透明度为零或 display 为 none 的图形,即使 CSS 或脚本之后会让它们显示出来。下载前请对比两个预览。
为什么优化后我的 CSS 或 JavaScript 不起作用了?
很可能是「清理 ID」导致的。它会删除未使用的 ID,并把其余的重命名为 a、b 这样的短名称,因此 SVG 之外查找某个 ID 的 CSS 或脚本就无法再匹配。如果 SVG 自带 style 或 script 标签,「清理 ID」不会改动这些 ID。关闭「清理 ID」即可保留它们。
六个优化选项分别有什么作用?
「移除元数据」会删除元数据块。「移除注释」会删除代码注释。「合并分组」会拆除没有实际作用的分组。「清理 ID」会缩短或移除 ID。「移除隐藏元素」会删掉不可见的图形和未使用的定义。「合并路径」会把样式相同的相邻路径合并为一条。
优化器会保留 viewBox 和 title 吗?
会。viewBox、width、height、title 和 desc 标签始终保留,所以 SVG 依然可以缩放,也保留文字说明。有一点要注意:「清理 ID」会移除 title 的 ID,导致指向它的 aria-labelledby 链接失效。遇到这类文件,请关闭「清理 ID」。
SVG 优化器会对数字取整或缩短路径数据吗?
不会。路径坐标不会被取整,不会丢掉任何有意义的数字,颜色也不会被改写。「合并路径」在合并两条路径时会重写路径代码,所以 10.000000 可能变成 10,但数值保持不变。正因如此,带有很长小数的文件在这里缩减的幅度较小。
为什么优化器提示我的 SVG 出错?
该文件不是有效的 SVG 代码。优化器会把文件当作文本来读取,遇到标记损坏(例如标签未闭合)就会停止,提示信息会指出出错的行和列。请用文本编辑器修复该处,然后重新添加文件。
我能看到被修改的代码吗?
可以。点击预览下方的「显示代码对比」,即可并排查看原始代码和优化后的代码。它显示的是两份完整的文件,而不是高亮每处改动,并且优化后的代码会被压缩成一长行。
可以优化 SVGZ 文件或粘贴 SVG 代码吗?
不可以。该工具一次只处理一个 .svg 文件,也没有用于粘贴代码的输入框。同时拖入两个文件会显示与文件类型错误相同的提示。压缩的 .svgz 文件不被支持,请先解压为普通的 .svg。如需一次清理多个文件,请使用批量 SVG 优化器。
这个 SVG 优化器就是 SVGO 吗?
它在你的浏览器中运行 SVGO 4,使用固定的 13 个插件,而不是默认预设。其中六个就是编辑器里的开关,另外七个始终运行,用于移除编辑器数据、XML 头、doctype 和空标签。
优化 SVG 时,我的文件会被发送到别处吗?
不会。你的 SVG 在当前浏览器标签页内读取和优化,结果会直接保存到你的下载目录。页面会发送匿名使用统计,例如开启了哪些开关和大致的文件大小,但绝不会发送 SVG 代码或文件名。