Merging multiple SVG files into one

Question

first of all I know that there are many similar questions like this, but none of them seem to do the trick for me. I'd like to know if there is any way to combine multiple svg files within one single file. Somewhat like this:

<svg id="background" ...>
   <svg id="first" ...>
       ...
   </svg>
   <svg id="second" ...>
       ...
   </svg>
   ...
</svg>

Is there some sort of template or tutorial that helps me do this? In the end I want to do this programmatically using java und javafx 2.2.

Answer 1

You may try svg-join for combine multiple SVG in one symbol collection.

This tool create two files for you. The first is "svg-bundle.svg":

<svg ...>
  <symbol id="svg1" ...>
  <symbol id="svg2" ...>
</svg>

Every symbol is your separate SVG file.

The last one is "svg-bundle.css":

.svg_svg1,
.svg_svg2 {
  width: 20px; // for example
  height: 20px;
}

Now you may use it in your html:

<link rel="stylesheet" type="text/css" href="svg-bundle.css" />
...
<svg class="svg_svg1"><use xlink:href="svg-bundle.svg#svg1"></svg>
<svg class="svg_svg2"><use xlink:href="svg-bundle.svg#svg2"></svg>

Answer 2

Are you saying you have entirely distinct SVG documents? In that case, what is the point of trying to cram them into one document? I'm confused.

If what you mean is you want to enclose one svg element in another, that's entirely possible, and in that sense your sample is syntactically correct.

If for some reason you really want to hold what are intrinsically distinct documents in a single SVG document, then I suppose you could use CSS to turn the display of each on and off.

#first, #second { display: none; }
.display-first #first { display: block; }
.display-second #second { display: block; }

function toggle_first () { document.body.classList.toggle("first"); }

or something along those lines.

Answer 3

To change the SVG in exactly that way, you should check out my SVG Stacking Tool. As SVGs are XML one can use XSLT to transform the data:

• SVG Stacking GitHub Repository

Update: As pointed out in the comments, there seems to be a bug so that the SVG file is requested multiple times. More details and a possible solution can be found here:

• The Problem with using SVG Sprites