merge SVG

SVG Merge

Combine several SVG files into one. Arrange them in a row, a column, a grid or stacked — each file keeps its own gradients, filters and styles.

merge SVG

☞ ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ไม่มีการอัปโหลดไฟล์

Drop your SVG files here

or click to browse — up to 12 SVG files

no bleeding between files

Why pasting two SVGs together goes wrong

Two SVG files can each be perfectly valid and still break the moment they share a document. Both may define a gradient with id "a", and both may carry an Illustrator stylesheet where everything is called .st0. Concatenate them and the second gradient quietly resolves to the first, while one stylesheet overrides the other — the file opens fine and simply looks wrong.

This tool renames every id and class in each source file with its own prefix and rewrites every reference to match: url() values, href fragments, inline styles and the selectors inside style elements. Each file is then placed in its own nested svg, which gives it a private viewport for its coordinate system.

three steps

How to merge SVG files

01

Drop the files

Add up to 12 .svg files — they stay on your device.

02

Arrange them

Row, column, grid or stacked, with the spacing you want.

03

Download

One SVG containing all of them.

quick answers

SVG merge FAQ

Will my gradients and filters survive?

Yes. Each file's ids get a prefix (f1-, f2- and so on) and every reference to them is rewritten, so two files that both used url(#a) end up pointing at their own definitions instead of fighting over one.

What about class names like .st0?

Those get the same treatment. Illustrator and Figma exports name almost everything .st0 or .cls-1, so class collisions are more common than id collisions — the class attributes and the selectors inside style elements are prefixed together.

Can I change the order?

Yes — use the arrows in the file list. The order there is the order in the layout, left to right and top to bottom.

Are the files resized?

No. Each keeps its own dimensions and is placed as-is; in a row they are centred vertically, in a grid every cell is as big as the largest file. Use the SVG resizer first if you want them to match.

What does stacked do?

It puts every file at the same spot, centred on top of each other — handy for overlaying a badge on an icon, or for comparing two versions of the same drawing.

Are my files uploaded?

No. Everything is parsed and assembled in your browser.