提供完整坐标系统
输入完整 svg 元素,包括命名空间和 viewBox。单独一段 path 没有画布坐标范围,须先放进合法的 SVG 文档中。
- 示例展示了可以直接处理的静态文档。
图片 / SVG / 图标
检查静态 SVG 源码,生成候选结果并对比图像,确认后再应用。
SVG 处理与预览均在浏览器内完成,外部资源被阻止。
源码或选项已变化,请重新生成结果。
设计软件导出的一个小图标,可能带着很长的注释与编辑信息。SVG 优化可以从这些内容开始清理,让你看清实际留下了哪些节点,而不是只看到一个压缩百分比。
这里把 SVG 在线编辑、源码结果和图像对比放在同一工作台。需要追查某条轮廓时,切到路径视图查看 d 属性;需要交给只收位图的平台时,再导出 PNG。
把源码变化与图像变化放在一起检查。
图标的 viewBox 很小,并不意味着只能导出很小的 PNG。指定像素宽度后,按原比例输出透明图片,方便放到不同颜色的背景上使用。
输入完整 svg 元素,包括命名空间和 viewBox。单独一段 path 没有画布坐标范围,须先放进合法的 SVG 文档中。
默认清除注释与元数据,数值舍入和路径优化默认关闭。只有开启相应选项后,小数精度才会作用于那一类改写。
源代码或选项一变,旧候选结果就会过期。重新生成预览,再进行应用或导出,避免带走上一次图标的结果。
格式化以两个空格缩进,便于追查分组层级或某个 fill 的来源;SVG 压缩则输出紧凑标记。两者都仍是 SVG,不会转成位图。含文本的节点可能依赖空白,检查源码时不能把所有空格都当作无用字符。
注释、metadata 可以单独选择是否删除。数值和路径优化由 SVGO 执行,并使用指定精度;这两项默认关闭。工具保留 ID、viewBox、title 和 desc,不主动用尺寸信息或可访问性描述换取更小的文件。
路径视图列出 path 的 d 数据,结合序号与标识符查找多轮廓图标中的对应线条。矩形、圆形等元素不会假装变成路径。这里用于查看,不提供贝塞尔控制点拖拽、布尔运算或画布绘图;这些操作应回到矢量编辑器完成。
PNG 导出按指定宽度保留源图比例,比例来自 viewBox 或受支持的像素宽高。宽高各不超过 4096 像素,总面积不超过 16777216 像素;即使宽度合法,特别狭长的图也可能因高度超限被拒绝。需要缩放时保留 SVG,需要确定像素尺寸时使用 PNG;输出背景默认透明。
本页采用显式选项控制 SVGO:可删除注释与 metadata,也可选择数值舍入和 path 改写。它不会自动开启所有插件;ID、viewBox、title 和 desc 会保留。候选结果中的字节数帮助你确认本次处理是否节省体积。
原文件可能用 CSS 覆盖表现属性,也可能使用 currentColor 继承颜色。本页不接受 style 元素,style 属性也只支持有限声明。若希望导出颜色固定,请在源代码中使用明确颜色,并检查对应形状是否仍被其他受支持的声明覆盖。
上限为 1 MiB,另有 20000 节点和 100 层深度限制。超限会被拒绝,不会只处理文件的一部分。复杂地图和整幅插画建议在源应用中简化,或使用适合大批量资产的构建流程。
应用候选结果后可以撤销一次,同时恢复之前的输入和输出。这里没有可视化节点属性面板,属性通过源码编辑;生成预览本身不覆盖原输入,只有点击应用才写回。
可能会,尤其是开启数值舍入或路径优化时。很小的坐标变化也可能影响紧贴像素边缘的线条。先保持这些选项关闭,再按需求开启,并在实际使用尺寸与嵌入环境下比较。
发现了这个转换器处理不好的边界情况?