SVG Merger — Combine Multiple SVGs Into One File
Merge separate SVG files into a single SVG document for sprites, combined illustrations, or icon sheets.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Why Merge SVG Files?
Combining SVGs is useful for creating sprite sheets, assembling complex illustrations from reusable parts, or delivering a single file to a client.
- Sprite sheets: one file, one HTTP request for all icons
- Complex illustrations: build from modular SVG components
- Client delivery: single file is simpler than a folder
- Print layouts: combine multiple logo variations on one artboard
Merging with Inkscape
Inkscape handles SVG merging visually.
- Open the first SVG: File > Open
- Import additional SVGs: File > Import (Ctrl+I) — each becomes a group on the canvas
- Arrange as needed, preserving or removing individual SVG viewBox coordinates
- Ungroup imports (Ctrl+Shift+G) to access individual paths
- Save as SVG: File > Save As
Programmatic SVG Merging
For automated workflows, merge SVGs with JavaScript.
- Read each SVG file (fs.readFile or fetch)
- Parse SVG XML with DOMParser
- Wrap each SVG's inner content in a <g id='icon-name'> group
- Append to a master SVG with a combined viewBox
- Serialize with XMLSerializer and write to file
Frequently Asked Questions
Can merged SVGs have conflicting IDs?
Yes — a common problem. Prefix all IDs from each source SVG: icon1-path1, icon2-path1, etc. SVGO's cleanupIds plugin can rename IDs to avoid conflicts.
Does merging SVGs increase file size proportionally?
Approximately — the merged SVG is roughly the sum of all component SVGs, minus any shared <defs> that are deduplicated.
Can I merge SVGs with different viewBoxes?
Yes. Wrap each SVG's content in a <g transform='translate(x,y) scale(s)'> to position and scale each graphic within a shared coordinate space.
Is there an online tool to merge SVGs?
Most online tools merge raster images, not SVG. Use the Inkscape method (free, visual) or write a short Node.js script for automated merging.
How do I merge SVGs in a CI/CD pipeline?
Use svg-sprite npm package in a build script. Configure a package.json script: 'sprites': 'svg-sprite --symbol --symbol-sprite=dist/sprite.svg src/icons/*.svg'
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free