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

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

Answer 2

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 3

After searching a lot of resource, I fount there is a python solution which is really handy: https://github.com/astraw/svg_stack

Say you have two svg file in hand, 11.svg 12.svg, what you can do is:

python svg_stack.py --direction=h --margin=100 11.svg 12.svg > 1.svg

You may think to have 6 svg files to lay out in this way:

11 12
21 22
31 32

which you can do following step:

# merge 11 12
python svg_stack.py --direction=h --margin=100 11.svg 12.svg > 1.svg
# merge 21 22
python svg_stack.py --direction=h --margin=100 21.svg 22.svg > 2.svg
# merge 31 32
python svg_stack.py --direction=h --margin=100 31.svg 32.svg > 3.svg
# merge all
python svg_stack.py --direction=v --margin=100 1.svg 2.svg 3.svg > final.svg

note that you can change merge direction using v and h