SVG 工具

SVG 优化器

使用开源 SVGO 优化器缩小 SVG 文件。比较前后的预览和文件大小,然后下载或复制结果。

将 SVG 文件拖放到此处

在你的浏览器中处理。文件永远不会上传。

该工具使用浏览器中的开源 SVGO 优化器。没有上传任何内容。 打开 VectorCraft

如何优化 SVG

  1. 1

    打开 SVG、粘贴代码或尝试示例。

  2. 2

    调整坐标精度并选择是否保留标题;比较预览。

  3. 3

    下载或复制优化的 SVG。

示例

设计工具导出的 SVG 可能包含注释、冗余属性与较长的小数坐标。对比优化前后的实际字节数;节省幅度取决于文件和设置。

从默认精度开始比较

优化器在浏览器内运行 SVGO,可缩短路径命令、移除冗余标记并减少数字精度。建议先使用默认精度。减少小数位可能节省字节,但过度舍入会移动细小特征或改变曲线,需要同时检查整体外形和精细部位。

以自己文件的前后字节数为准。已经优化过的 SVG 可能几乎没有节省,压缩比例并不固定。格式化输出加入空白以便阅读,可能比精简输出更大;网页交付可选精简输出,需要人工阅读时再选格式化。

保留含义并检查实际使用场景

默认设置保留 viewBox,并保留 title 与 desc。这些元素可能提供有意义的标签,不应只为节省少量字节就随意移除。是否保留可自行选择,但图片嵌入方式及周围 HTML 同样影响无障碍体验;压缩本身并不能让图片自动变得无障碍。

先对比形状、渐变与裁剪,再将下载文件放入实际使用场景。优化可能调整 ID 或结构,因此依赖这些内容的外部 CSS、脚本和动画也应检查。保留设计源文件,把优化副本用于交付。本工具压缩 SVG 标记,不负责转 PNG,也不保证每个精度设置都无损。

用于交付文件的 SVG 优化检查清单

先准备已完成的 SVG,并保留可编辑的源文件。用 SVG 优化器按默认设置打开,对照优化前后的预览,再查看两份文件的字节大小。仔细检查细轮廓、转角、渐变过渡和裁切形状。降低精度后,每次都重新比较;发现细节移动或消失时就停止。文件变小的前提是仍能满足原来的用途。

网页图片可以用紧凑输出;需要别人阅读代码时,可以选择格式化输出。标题包含有意义的说明时应保留,并在最终页面验证图像。优化器会保留 viewBox,但显示宽高仍由目标位置决定。针对特定 ID 的外部样式或脚本需要另行检查,因为优化可能改变文档结构。不要把交付副本当作唯一可编辑的主文件。

优化报错时,确认文件是完整的 SVG 代码,标签正确闭合,属性值带引号。先尝试示例确认工具可在浏览器中运行,再把源文件和能正常处理的导出文件对照。已经精简的文件可能几乎没有节省;开启格式化输出后,文件甚至可能更大。这个 SVG 压缩工具显示实际结果,不保证每份文件都能缩小。下载确认过的副本,重新打开检查后再替换已有资源。

功能说明与当前限制

  • 删除注释、编辑器元数据和未使用的定义,并缩短路径和数字。
  • viewBox 始终保留,因此图像以相同的方式缩放。
  • 较低的精度会产生较小的文件,但会改变微小的细节;检查预览。

SVG 优化器常见问题

这个是无损的吗?

默认设置使大多数文件中的形状在视觉上保持相同。非常低的精度可能会改变小细节。

我的文件上传了吗?

不会。SVGO 在你的浏览器中运行。