无需上传、100% 本地处理、无需账户

SVG 优化器

粘贴或拖入一个 SVG，用 SVGO 将其缩小。一切都在浏览器中完成。

SVG 优化器 的工作原理

SVG 优化器在浏览器内的 Web Worker 中运行 SVGO（SVG 优化器）来压缩和清理你的 SVG 文件，无需上传。SVGO 应用一组可配置的插件，删除注释、折叠空白、合并相同路径、将形状转换为最紧凑的表示，并删除没有视觉效果的属性。结果是一个更小的 SVG，渲染效果与原始文件相同。

Figma、Illustrator 或 Inkscape 等设计工具生成的 SVG 文件通常包含大量开销：编辑器特定的元数据、空组、多余的变换属性和浏览器不需要的命名空间声明。SVGO 的默认插件集可靠地删除这些开销。优化后的文件提供为下载，并显示文件大小缩减百分比，方便你确认优化是否值得。

作者 Bastien Sulyan

SVG 优化器 的分步使用说明

  1. 将 SVG 文件拖到上传区域或点击浏览。
  2. SVGO Web Worker 立即使用默认插件集运行优化。
  3. 查看缩减百分比以及原始文件与优化文件的大小。
  4. 点击「下载」将优化后的 SVG 保存到你的设备。
  5. 如果特定插件导致渲染问题，调整插件配置并重新优化。

常见使用场景

  • 前端开发者在将 Figma 导出的图标提交到生产资产管道前进行优化，将每个图标从 4 KB 减小到 1 KB 以下。
  • 网页设计师清理 Illustrator 导出的 SVG 插图，这些插图包含在浏览器中不可见但使文件臃肿的编辑器元数据层。
  • 从 SVG 字形构建图标字体的开发者确保每个源 SVG 在字体构建步骤之前整洁且结构一致。
  • 性能工程师审计 HTML 中的内联 SVG，用 SVGO 优化的版本替换每个臃肿的原始文件，以改善页面重量。

常见问题

SVGO 会改变我的 SVG 的外观吗？

SVGO 的默认插件被选择为视觉无损：优化后的 SVG 在所有标准浏览器中的渲染效果与原始文件相同。某些激进的插件（例如大幅舍入路径坐标的插件）可能会引入细微的渲染差异。如果你注意到视觉变化，请在浏览器中比较原始文件和优化文件，并禁用导致问题的特定插件。

SVG 文件是发送到服务器进行优化的吗？

不是。SVGO 在你的浏览器标签页内的 Web Worker 中运行。SVG 文本从你的本地磁盘读取，在 JavaScript 内存中处理，输出返回到页面供下载。文件内容不离开你的设备。

我的 SVG 会缩小多少？

缩减效果取决于源文件。从设计工具导出的带有编辑器元数据的 SVG 通常可以缩减 30 到 70%。已经很精简的手写 SVG 可能只有 5 到 15% 的缩减。工具显示确切的字节数和百分比，以便你单独评估每个文件。

优化是否影响 SVG 动画或文件内的 JavaScript？

SVGO 的默认配置保留动画元素和 SMIL 属性，但会删除 script 元素：该工具在 SVGO 默认预设的基础上添加了 removeScripts 插件，因为即将嵌入的 SVG 不应携带可执行代码。某些清理属性的插件如果动画通过 ID 引用这些属性，可能会与动画产生交互；优化使用复杂动画的文件后，请检查渲染输出。

可以一次优化多个 SVG 文件吗？

当前版本每次处理一个 SVG 文件。拖入一个文件，下载结果，然后拖入下一个文件。本版本不支持在单次会话中批量处理多个文件。

工具使用哪个版本的 SVGO？

工具捆绑了在 Web Worker 中运行的 SVGO。捆绑的版本在工具的关于信息中说明。SVGO 在持续维护中，插件 API 在 v1、v2 和 v3 之间有显著变化；当前工具使用 v3 插件格式。