拆分 SVG

SVG 拆分

把一个 SVG 拆成顶层的各个部分。逐一预览每个分组、symbol 和图形,勾选需要的,再作为独立文件带走。

拆分 SVG

☞ 全程在你的浏览器中运行 —— 不会上传任何图片

将 SVG 拖放到此处

或点击浏览 —— 仅限 SVG

一个片段一个文件

什么才算一个片段

只拆文件的顶层,而且只拆真正画出东西的部分:分组、symbol、路径、图形、文字和图片。渐变、滤镜、蒙版和样式表属于定义而非绘制,所以从不单独列出 —— 一个只装着渐变的文件会是空白的。

导出的每个片段都会带上原文件的全套定义与样式。这让每个文件都比严格必要的更大,而这是刻意的取舍:一个渲染结果与原图中一模一样的片段,胜过一个更小却少了渐变的片段。把结果送去 SVG 优化器,即可清掉它们用不上的部分。

三步完成

如何拆分 SVG

01

拖入 SVG

选择一个 .svg 文件 —— 它始终留在您的设备上。

02

勾选片段

每个片段的预览就是它导出后的样子。

03

下载

只选一个直接下载,多个则打包成 ZIP。

快速解答

SVG 拆分常见问题

为什么每个片段和原文件差不多大?

因为它带上了整个 defs 块和所有样式表。判断某个图形究竟用到了哪个渐变或滤镜,是一种会悄悄出错的猜测,所以干脆每个片段都给全。SVG 优化器一遍就能把用不到的部分清掉。

什么都没列出来,为什么?

很可能整幅图都装在同一个分组里,那就只算一个片段。拆分被刻意限制在顶层;再往下钻,一张普通插画会碎成上百个片段。

它能处理图标雪碧图吗?

能,而且这正是它处理得最好的场景。雪碧图里的每个 symbol 都会用它自己的 viewBox 变成一个独立文件,因此您得到的是一个个裁剪正确的图标,而不是一张张空白画布。

片段会按内容裁紧吗?

不会。每个片段保留原始 viewBox,因此位置和比例都与它在整幅图中一致。如果想裁紧,之后用 SVG 裁剪工具处理即可。

最多能处理多少个片段?

最多列出前 100 个顶层片段。再多的话,生成预览花的时间就超过拆分本身的价值了 —— 请先把文件合并或分组。

我的文件会被上传吗?

不会。文件的解析与拆分都在您的浏览器里完成,ZIP 也是在那里打包的。