图片 / SVG / 图标

SVG 优化先看变化,再应用

检查静态 SVG 源码,生成候选结果并对比图像,确认后再应用。

SVG 优化

SVG 源码

结果

SVG 处理与预览均在浏览器内完成,外部资源被阻止。

选项

源码或选项已变化,请重新生成结果。

设计软件导出的一个小图标,可能带着很长的注释与编辑信息。SVG 优化可以从这些内容开始清理,让你看清实际留下了哪些节点,而不是只看到一个压缩百分比。

这里把 SVG 在线编辑、源码结果和图像对比放在同一工作台。需要追查某条轮廓时,切到路径视图查看 d 属性;需要交给只收位图的平台时,再导出 PNG。

为什么在这里做 SVG 优化

把源码变化与图像变化放在一起检查。

候选结果先留在旁边

SVG 优化不会在生成候选时直接覆盖原输入。先看字节与变化数量,再比较两幅图;应用后仍可撤销,同时找回之前的输入和结果。

两幅矢量图旁分别展示源码块,其中一块移除了多余节点。

小坐标也能导出大图

图标的 viewBox 很小,并不意味着只能导出很小的 PNG。指定像素宽度后,按原比例输出透明图片,方便放到不同颜色的背景上使用。

矢量形状转换为更大的像素图,背景棋盘格表示透明区域。

在覆盖源码前确认三个细节

01

提供完整坐标系统

输入完整 svg 元素,包括命名空间和 viewBox。单独一段 path 没有画布坐标范围,须先放进合法的 SVG 文档中。

  • 示例展示了可以直接处理的静态文档。
02

按需开启精度改写

默认清除注释与元数据,数值舍入和路径优化默认关闭。只有开启相应选项后,小数精度才会作用于那一类改写。

  • 手动模式可用 Ctrl/Cmd + Enter 执行主操作。
03

修改参数后重新确认

源代码或选项一变,旧候选结果就会过期。重新生成预览,再进行应用或导出,避免带走上一次图标的结果。

  • 应用后的撤销同时恢复输入和输出。

从可读源码到可用图片

格式化与压缩分开选择

格式化以两个空格缩进,便于追查分组层级或某个 fill 的来源;SVG 压缩则输出紧凑标记。两者都仍是 SVG,不会转成位图。含文本的节点可能依赖空白,检查源码时不能把所有空格都当作无用字符。

清理和几何改写各自控制

注释、metadata 可以单独选择是否删除。数值和路径优化由 SVGO 执行,并使用指定精度;这两项默认关闭。工具保留 ID、viewBox、title 和 desc,不主动用尺寸信息或可访问性描述换取更小的文件。

逐条检查路径数据

路径视图列出 path 的 d 数据,结合序号与标识符查找多轮廓图标中的对应线条。矩形、圆形等元素不会假装变成路径。这里用于查看,不提供贝塞尔控制点拖拽、布尔运算或画布绘图;这些操作应回到矢量编辑器完成。

透明 PNG 导出

PNG 导出按指定宽度保留源图比例,比例来自 viewBox 或受支持的像素宽高。宽高各不超过 4096 像素,总面积不超过 16777216 像素;即使宽度合法,特别狭长的图也可能因高度超限被拒绝。需要缩放时保留 SVG,需要确定像素尺寸时使用 PNG;输出背景默认透明。

输入范围与导出边界

只接收静态内容
不支持 script、事件属性、动画、foreignObject、image 和 style 元素,也不接受外部引用、嵌入图片、处理指令或文档类型声明。常见静态形状、文本、渐变及文档内片段引用可处理;本页不是能接收任意文件的 SVG 净化器。
样式与命名空间有范围
style 属性仅接受白名单中的表现声明,URL 只能指向文档内部的片段 ID。任意 XML 命名空间内容不在支持范围内,包括编辑器 metadata 中常见的 RDF 子树。遇到此类导出文件,请先在原软件清理编辑信息,不要假设删除元数据选项能绕过检查。
文件与尺寸均有上限
输入最多为 1 MiB 的 UTF-8 文本、20000 个节点及 100 层嵌套,节点数包含文本和注释。优化任务超过 20 秒会停止。PNG 输出需要有效 viewBox 或像素宽高;相对单位或复杂 CSS 尺寸不能直接确定这里的输出比例。大地图或复杂插画应先在原软件简化后再处理。 PNG 宽高各不超过 4096 像素,狭长图也可能触发高度上限。
外观变化必须检查
数值舍入与 path 改写可能改变细小轮廓。应用前比较原图和候选图,并在最终嵌入环境检查。SVG 优化显示实际字节变化,不承诺固定压缩率;手写图标可能已经很紧凑,格式化后的结果也可能更大。

SVG 优化常见问题

SVGO 压缩具体做了什么?

本页采用显式选项控制 SVGO:可删除注释与 metadata,也可选择数值舍入和 path 改写。它不会自动开启所有插件;ID、viewBox、title 和 desc 会保留。候选结果中的字节数帮助你确认本次处理是否节省体积。

为什么 fill 改了没生效?

原文件可能用 CSS 覆盖表现属性,也可能使用 currentColor 继承颜色。本页不接受 style 元素,style 属性也只支持有限声明。若希望导出颜色固定,请在源代码中使用明确颜色,并检查对应形状是否仍被其他受支持的声明覆盖。

支持多大的 SVG 文件?

上限为 1 MiB,另有 20000 节点和 100 层深度限制。超限会被拒绝,不会只处理文件的一部分。复杂地图和整幅插画建议在源应用中简化,或使用适合大批量资产的构建流程。

改了节点属性后能撤销吗?

应用候选结果后可以撤销一次,同时恢复之前的输入和输出。这里没有可视化节点属性面板,属性通过源码编辑;生成预览本身不覆盖原输入,只有点击应用才写回。

优化 SVG 会降低其视觉质量吗?

可能会,尤其是开启数值舍入或路径优化时。很小的坐标变化也可能影响紧贴像素边缘的线条。先保持这些选项关闭,再按需求开启,并在实际使用尺寸与嵌入环境下比较。

发现了这个转换器处理不好的边界情况?

开始 SVG 优化

选一个图标进行 SVG 优化,检查候选外观,再把确认过的文件带回项目。

保留原始设计文件,便于后续修改。