合并 SVG
☞ 全程在你的浏览器中运行 —— 不会上传任何图片将多个 SVG 文件拖放到此处
或点击浏览 —— 最多 12 个 SVG 文件
预览
合并 SVG
把多个 SVG 文件合成一个。可以排成一行、一列、网格或叠放 —— 每个文件都保留自己的渐变、滤镜和样式。
或点击浏览 —— 最多 12 个 SVG 文件
预览
文件之间互不串味
两个 SVG 文件各自完全合法,一旦共处同一个文档就可能出问题。它们可能都定义了 id 为 "a" 的渐变,也可能都带着一份 Illustrator 样式表、里面什么都叫 .st0。直接拼接后,第二个渐变会悄悄解析到第一个上去,而两份样式表互相覆盖 —— 文件照常打开,只是显示不对。
这个工具会给每个源文件的所有 id 和类名加上专属前缀,并同步改写所有引用:url() 的值、href 片段、内联样式,以及 style 元素里的选择器。随后每个文件被放进自己的嵌套 svg 中,从而拥有一个属于它自己坐标系的独立视口。
三步完成
最多添加 12 个 .svg 文件 —— 它们始终留在您的设备上。
一行、一列、网格或叠放,间距随您设定。
一个包含全部内容的 SVG。
快速解答
还在。每个文件的 id 都会加上前缀(f1-、f2- 等等),所有指向它们的引用同步改写,因此两个都用了 url(#a) 的文件最终各自指向自己的定义,而不会抢同一个。
同样处理。Illustrator 和 Figma 导出的文件几乎把所有东西都命名成 .st0 或 .cls-1,所以类名冲突其实比 id 冲突更常见 —— class 属性和 style 元素里的选择器会一起加前缀。
可以 —— 用文件列表里的上下箭头。列表里的顺序就是排版顺序,从左到右、从上到下。
不会。每个文件保留自己的尺寸并原样放置;排成一行时垂直居中,网格中每个格子按最大的那个文件取尺寸。如果希望它们尺寸一致,请先用 SVG 尺寸调整工具。
它把所有文件放在同一位置、彼此居中叠在一起 —— 适合给图标叠一个角标,或者对比同一幅图的两个版本。
不会。全部解析与拼装都在您的浏览器里完成。