SVG 优化工具可以处理什么?
粘贴 SVG 或打开不超过 2 MiB 的 .svg 文件。浏览器 Worker 使用 SVGO 执行优化,可选择多轮处理。下载前请比较原图、结果预览和 UTF-8 字节大小。
什么时候使用这个工具?
矢量 SVG 使用本工具;JPEG、PNG 和 WebP 使用图片压缩。依赖外部样式、动画、脚本或字体的 SVG 应保留原件并在实际应用中测试。
如何使用?
- 粘贴 SVG 文档或打开本地 .svg 文件;不接受 DTD 声明。
- 选择是否多轮优化,点击“运行”。
- 比较预览和字节大小,再复制或下载优化结果。
实际输入输出示例
移除冗余编辑器内容
输入
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><!-- editor note --><rect width="10" height="10" fill="#0000ff"/></svg>输出
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path fill="#00f" d="M0 0h10v10H0z"/></svg>SVGO 可以移除注释、缩短颜色和重写形状;具体序列化结果以采用版本实际输出为准。
常见错误与修复方法
| 现象 | 可能原因 | 修复方法 |
|---|---|---|
| 提示 XML 无效。 | 标签不匹配、根元素不是 SVG,或含有 DTD。 | 提供标签配对正确且不含 DTD 的 SVG。 |
| 文件没有变小或预览不同。 | 已优化文件剩余空间有限,字体和外部依赖也会影响显示。 | 在实际应用中检查结果,需要时保留原件。 |
支持范围与限制
优化不等于消毒,不能证明下载的 SVG 在其他上下文中安全。预览使用图片方式,不将 SVG 作为网页元素插入。保留 ID,但 CSS、脚本、字体、动画和外部引用仍需在目标应用检查。
标准与实现参考
- SVGO 官方仓库 (opens in a new tab)定义优化引擎和插件。
- SVGO 浏览器使用文档 (opens in a new tab)说明本工具采用的浏览器专用入口。
关于SVG 优化工具的常见问题
输入内容会上传吗?
不会。数据在浏览器 Worker 内处理。页面从本站加载所需引擎,不向处理 API 发送输入、输出或文件名。
需要账号或 API Key 吗?
不需要账号、API Key 或后端处理服务。
如何保存处理结果?
检查结果后,使用对应的复制或下载控件。修改输入会清除旧结果,避免误用。
有哪些限制?
优化不等于消毒,不能证明下载的 SVG 在其他上下文中安全。预览使用图片方式,不将 SVG 作为网页元素插入。保留 ID,但 CSS、脚本、字体、动画和外部引用仍需在目标应用检查。
更新记录
新增浏览器本地处理、明确大小限制、取消操作、实际输入输出示例、常见错误解释和结果下载;完成中文工作区与说明审校。