SVG 校样 01

免费在线 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 当成已审核的生产副本,原稿继续放在常用设计资产库或版本控制中。