How to Combine Multiple SVG Files Into One
Merge SVG files for sprite sheets, combined illustrations, or reducing HTTP requests in web projects.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Method 1: SVG Sprite Sheet (For Icons)
An SVG sprite combines multiple icon SVGs into a single file. Each icon is wrapped in a <symbol> element and referenced with <use>.
- Each icon becomes: <symbol id='icon-home' viewBox='0 0 24 24'>...</symbol>
- Reference in HTML: <svg><use href='#icon-home'></use></svg>
- One file, one HTTP request, unlimited icon reuse
- Tools: svg-sprite npm package, IcoMoon, Fontello
Method 2: Inkscape (Visual Merge)
Open the first SVG in Inkscape. Use File > Import to add additional SVG files. Position elements as needed. Save as a combined SVG.
- File > Open: open first SVG
- File > Import: import each additional SVG
- Each import adds a group — use Object > Ungroup to access paths
- Arrange visually on the canvas
- File > Save a Copy as SVG to save the combined file
Method 3: Manual XML Merge (For Developers)
Copy the contents of each SVG's <svg> element (not the <svg> tag itself, just what's inside) and paste them inside a single parent <svg> element.
- Create a new SVG: <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500'>
- Paste the inner content of each source SVG
- Adjust positions using <g transform='translate(X, Y)'> to position each graphic
- Combine viewBox dimensions to fit all content
- Use unique IDs across files to avoid conflicts
Method 4: CSS Background Sprite
Combine SVGs as a vertical stack in one file. Use background-position in CSS to show only the needed icon. Less flexible than <use> sprites but works as a CSS-only solution.
Frequently Asked Questions
What is an SVG sprite and why should I use it?
An SVG sprite is a single SVG file containing multiple symbols. It reduces HTTP requests (one file vs. many), enables icon reuse across a page, and allows CSS styling of individual icons.
Can I combine SVGs with different viewBoxes?
Yes. Wrap each SVG's content in a <g transform='translate(x,y) scale(s)'> to position and size each graphic within a shared coordinate space.
How do I make a sprite from Figma icon exports?
Export each icon as SVG from Figma. Use the svg-sprite npm package or Icomoon to combine them: run svg-sprite --svg-sprite icons-sprite.svg ./icons/*.svg
Does combining SVGs affect performance?
Positively. One sprite file loads faster than many individual SVGs due to reduced HTTP round-trips. The browser caches the single sprite for all pages.
Can I combine SVG and raster images in one file?
Yes. SVG supports <image href='photo.jpg'> to embed external raster images, or base64-encode them inline. Combined files can contain both vector paths and embedded rasters.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG