SVG 校样 01

免费在线 SVG 压缩工具

浏览器本地工作台

校样台已就绪

把一个 SVG 拖到校样台

最大 4 MiB,文件会留在当前浏览器标签页

也可以在这个面板中直接粘贴完整 SVG 代码

优化预设
原始 SVG
添加 SVG 后会在这个固定区域预览
优化后的 SVG
添加 SVG 后会在这个固定区域预览

定义

SVG 压缩工具到底做了什么

SVG 压缩工具会在不把矢量图变成位图的前提下,重新整理有效的 XML 标记。它可以删除注释、编辑器元数据和多余格式,并在明确边界内精简数值、颜色与路径。GlyPho 会展示优化前后的真实字节差,再由你决定是否下载。

SVG 本质上是一份用 XML 描述形状的文本文件,而不是固定像素网格。从 Figma、Illustrator、生成器或代码项目导出时,文件里既有真正负责绘制的路径,也可能带着注释、命名空间、冗长小数和格式痕迹。压缩针对的是这些代码开销,不会降低图像分辨率,也不会把可编辑路径换成截图。

好用的 SVG 精简工具应该清楚说明改了什么。GlyPho 会先验证单一 SVG 根节点并拒绝不安全的外部引用,再通过 Web Worker 运行固定的 SVGO 插件集。你可以对比原图和优化结果,查看 UTF-8 真实字节,然后复制或下载。不同源文件差异很大,因此工具不会承诺所谓“平均压缩率”。

两种可核对预设

安全还是平衡:先确定编辑边界

两种预设使用相同的输入验证和基础清理。区别在于是否进一步改写数值与路径。需要回到编辑器或依赖钩子时,优先从安全开始;网页交付更看重体积时,再对比平衡结果。

对比项安全预设平衡预设
适合从哪里开始设计系统源文件、无障碍图标、动画素材,以及以后可能回到编辑器的文件。已完成视觉审核的网站素材、生产导出和希望交付代码更紧凑的文件。
会执行的清理移除注释、文档声明、元数据、编辑器命名空间、脚本和事件属性,同时整理并排序属性。包含安全清理,再按固定精度精简数值、颜色、路径和变换数据。
保留合同保留 viewBox、ID、class、无障碍关联、内部引用、蒙版、渐变、CSS 和 SMIL 动画。延续相同保护边界,但会把可改写的几何数据表达得更紧凑。
建议检查当文件依赖编辑器约定或运行时钩子时,对比预览并查看代码。在实际使用尺寸下仔细对比,尤其注意复杂路径和精确变换。

可见合同

会删除什么,又会保留什么

压缩不应该是黑箱。下面的边界对应当前预设,方便设计师和开发者判断优化后的文件是否仍适合下一个环节。

删除或规范化

  • 不参与绘制的 XML 声明、doctype、注释、元数据元素和编辑器专用命名空间数据。
  • 脚本与内联事件处理属性;结果会显示警告,而不是静默处理。
  • 冗余的属性格式,属性也可能被按稳定顺序重排,方便代码审查。
  • 在平衡预设中,还会精简不必要的数值精度,以及可处理的颜色、路径和变换表达。

为真实工作流保护

  • viewBox 和可缩放矢量结构,文件不会因压缩变成固定尺寸的位图。
  • 供 CSS、组件、蒙版、渐变和裁剪路径使用的 ID、class、data 钩子与内部片段引用。
  • 无障碍的 title、description 与 aria-labelledby 关联,包括它们所依赖的 ID。
  • 符合本地引用安全边界的嵌入 CSS 和 SMIL 动画结构。

从源文件到交付

Figma、AI 生成和 Web 中的 SVG 工作流

SVG 优化应该位于“源文件已审核”和“真正交付”之间。把预览和字节数当作一道质量关;只要以后还可能改图,就同时保留可编辑原稿。

01

Figma 与 Illustrator 导出

导出选中的矢量图层并确认 viewBox 正确,交付前先放到这里检查。安全预设可清理注释、元数据、编辑器命名空间和属性噪音,同时保留受保护的 ID 与无障碍结构。下载的是交付副本,原始设计文件仍应单独归档。

02

AI 生成 SVG 输入

生成器可能给出完全有效、但带着长小数、冗长路径、重复变换、注释和元数据的 SVG。这只代表 AI 是输入来源,不代表压缩本身使用 AI。先检查画面,再从安全预设开始;如果品牌形状和小细节都稳定,再对比平衡预设。

03

Web 与组件交付

等视觉稿定稿后,再优化即将进入 public 素材目录、图标包、邮件模板或内联组件的 SVG。如果 CSS、渐变、蒙版或 JavaScript 引用了 ID,就要保留其稳定性。HTTP 压缩、打包、复用和缓存仍是另外的 Web 性能环节。

Fixture 实测

真实的压缩前后字节数

下面的数字来自仓库 fixture,并使用工具中同一个优化器实际运行。它们用来说明源结构和预设如何影响结果,不是平均压缩率,也不是对其他文件的承诺。

figma-illustrator.svg安全预设

编辑器导出的安全清理

原始 SVG374 B
优化后的 SVG199 B

节省 175 B(46.8%). 固定的安全插件会移除编辑器残留并整理属性,同时保留 fixture 的矢量结构。

ai-generated.svg平衡预设

生成几何的平衡清理

原始 SVG306 B
优化后的 SVG156 B

节省 150 B(49.0%). 平衡预设在相同保护边界上,增加数值、颜色、路径和变换数据清理。

字节统计使用 UTF-8 长度。Figma/Illustrator fixture 包含注释、编辑器命名空间数据和格式开销;AI 生成 fixture 包含冗长几何数据。已经很紧凑的 SVG 可能几乎没有节省,工具会如实显示。

默认本地处理

SVG 不会离开浏览器

这个免费在线 SVG 压缩工具不需要账号或上传接口。文件读取、验证、优化、前后对比、预览、复制与下载都在当前浏览器会话中协调完成。

不上传文件

选择的文件或粘贴的代码会在本地读取,优化器不会把 SVG 发送到 GlyPho 处理。

Worker 隔离

优化在浏览器 Web Worker 中运行,较重的解析不会直接堵住主界面线程。

拒绝外部资源

尝试引用外部样式表、图片、URL 或不支持的嵌入内容的 SVG,会在优化前被拒绝。

输出由你决定

工具不会自动发布任何内容。先对比预览,再决定复制还是下载优化代码。

校样台常见问题

SVG 压缩工具 FAQ

关于输入限制、视觉质量、安全性、可编辑结构、字节计算和浏览器本地处理的实用说明。

这个 SVG 压缩工具免费且可在线使用吗?

可以。你能在现代浏览器中每次处理一个 SVG,无需注册,当前文件上限为 4 MiB。处理留在当前标签页,因此显示结果前不需要上传作品。

优化 SVG 会降低画质吗?

两种预设都是改写标记,而不是把画面位图化。安全预设主要清理非视觉残留;平衡预设还会按固定精度精简部分数值与几何数据。替换生产文件前,请对比两个固定高度预览。

ID、class、CSS 和无障碍文本会怎样?

两种预设都保留 ID、class、data 钩子、内部片段引用、嵌入 CSS、viewBox、title 和 description 元素,以及 aria-labelledby 关联。这个合同能支持组件、渐变、蒙版、动画和无障碍图标工作流。

为什么我的文件只变小了一点?

源文件可能已经很紧凑,也可能大部分字节来自当前预设会保留的几何数据或嵌入位图。GlyPho 如实显示原始与优化后的 UTF-8 大小;如果没变小,就不会虚构节省数据。

可以直接粘贴 SVG 代码吗?

可以。把完整标记粘贴到工具面板,选择预设后开始优化。下载会使用合理的文件名;检查后,也可以直接复制整理好的标记到组件或源文件。

SVGO 是用 AI 压缩文件吗?

不是。AI 工具可以是 SVG 的来源,但这个压缩工具使用的是明确 SVGO 插件列表和确定的验证规则。页面只把 AI 生成作品当作一种输入工作流,不会宣称 SVGO 是 AI 压缩系统。

还需要保留原始 SVG 吗?

如果文件以后还会回到设计编辑器、可能修改路径,或者带有交付合同之外的创作信息,就应该保留。把优化 SVG 当成已审核的生产副本,原稿继续放在常用设计资产库或版本控制中。