合并 SVG

SVG 合并

把多个 SVG 文件合成一个。可以排成一行、一列、网格或叠放 —— 每个文件都保留自己的渐变、滤镜和样式。

合并 SVG

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

将多个 SVG 文件拖放到此处

或点击浏览 —— 最多 12 个 SVG 文件

文件之间互不串味

为什么把两个 SVG 直接粘一起会出事

两个 SVG 文件各自完全合法,一旦共处同一个文档就可能出问题。它们可能都定义了 id 为 "a" 的渐变,也可能都带着一份 Illustrator 样式表、里面什么都叫 .st0。直接拼接后,第二个渐变会悄悄解析到第一个上去,而两份样式表互相覆盖 —— 文件照常打开,只是显示不对。

这个工具会给每个源文件的所有 id 和类名加上专属前缀,并同步改写所有引用:url() 的值、href 片段、内联样式,以及 style 元素里的选择器。随后每个文件被放进自己的嵌套 svg 中,从而拥有一个属于它自己坐标系的独立视口。

三步完成

如何合并 SVG 文件

01

拖入文件

最多添加 12 个 .svg 文件 —— 它们始终留在您的设备上。

02

排列它们

一行、一列、网格或叠放,间距随您设定。

03

下载

一个包含全部内容的 SVG。

快速解答

SVG 合并常见问题

我的渐变和滤镜还在吗?

还在。每个文件的 id 都会加上前缀(f1-、f2- 等等),所有指向它们的引用同步改写,因此两个都用了 url(#a) 的文件最终各自指向自己的定义,而不会抢同一个。

那 .st0 这类类名呢?

同样处理。Illustrator 和 Figma 导出的文件几乎把所有东西都命名成 .st0 或 .cls-1,所以类名冲突其实比 id 冲突更常见 —— class 属性和 style 元素里的选择器会一起加前缀。

可以调整顺序吗?

可以 —— 用文件列表里的上下箭头。列表里的顺序就是排版顺序,从左到右、从上到下。

文件会被缩放吗?

不会。每个文件保留自己的尺寸并原样放置;排成一行时垂直居中,网格中每个格子按最大的那个文件取尺寸。如果希望它们尺寸一致,请先用 SVG 尺寸调整工具。

「叠放」是做什么的?

它把所有文件放在同一位置、彼此居中叠在一起 —— 适合给图标叠一个角标,或者对比同一幅图的两个版本。

我的文件会被上传吗?

不会。全部解析与拼装都在您的浏览器里完成。