Mehrere SVG-Dateien zu einer einzigen zusammenführen

Question

Zunächst einmal weiß ich, dass es viele ähnliche Fragen wie diese gibt, aber keine von ihnen scheint mir weiterzuhelfen. Ich würde gerne wissen, ob es eine Möglichkeit gibt, mehrere svg-Dateien in einer einzigen Datei zu kombinieren. Ungefähr so:

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

Gibt es eine Vorlage oder eine Anleitung, die mir dabei hilft, dies zu tun? Letztendlich möchte ich das programmatisch mit Java und Javafx 2.2 machen.

Answer 1

Um das SVG genau auf diese Weise zu verändern, sollten Sie sich mein SVG Stacking Tool ansehen. Da SVGs XML sind, kann man XSLT verwenden, um die Daten zu transformieren:

• SVG Stacking GitHub Repository

Aktualisierung: Wie in den Kommentaren erwähnt, scheint es einen Fehler zu geben, so dass die SVG-Datei mehrfach angefordert wird. Weitere Details und eine mögliche Lösung finden Sie hier:

• Das Problem bei der Verwendung von SVG-Sprites

Answer 2

Sie können versuchen svg-join um mehrere SVG in einer Symbolsammlung zu kombinieren.

Dieses Tool erstellt zwei Dateien für Sie. Die erste ist "svg-bundle.svg":

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

Jedes Symbol ist eine eigene SVG-Datei.

Die letzte Datei ist "svg-bundle.css":

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

Jetzt können Sie es in Ihrem html verwenden:

<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

Nach der Suche eine Menge von Ressourcen, fand ich es gibt eine Python-Lösung, die wirklich praktisch ist: https://github.com/astraw/svg_stack

Angenommen, Sie haben zwei svg-Dateien in der Hand, 11.svg 12.svg, was Sie tun können, ist:

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

Sie können sich vorstellen, 6 svg-Dateien auf diese Weise zu gestalten:

11 12
21 22
31 32

die Sie im folgenden Schritt durchführen können:

# 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

Beachten Sie, dass Sie die Zusammenführungsrichtung mit v y h

Answer 4

Ich denke, der beste und einfachste Weg ist, dies zu tun, vorausgesetzt, Sie müssen nur die letzten beiden Hauptversionen der wichtigsten Browser unterstützen, Android 9 Chrome, iOS 13 Safari, Desktop: Chrome, Firefox, Safari, Edge 87.

1 EDITAR : Komprimieren Sie zuerst alle SVGs, da sie sonst innerhalb von CSS kaputt gehen könnten, z.B. mit https://jakearchibald.github.io/svgomg/

2 Erstellen Sie eine separar Stylesheet und betten die svgs ein:

.icon-1 {
  background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');
}
.icon-2 {
  background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');
}

3 Lazy load this stylesheet with js - da diese Art von Stylesheets dazu neigt, sehr groß zu werden und normalerweise nicht benötigt wird, um das Rendern der Seite zu blockieren.

Ich entkam # con %23 (ich weiß nicht, ob das wirklich notwendig ist), scheint es, als ob Sie nicht reguläre SVGs müssen auf andere Weise entkommen - ich habe allerdings nicht getestet, ob sie Inline-Style-Tags enthalten (diese Styles können ohnehin in Ihr Stylesheet verschoben werden)

Answer 5

Ich habe Victor gem https://github.com/DannyBen/victor

first_svg = File.open("first.svg").read
second_svg = File.open("second.svg").read

first_content = first_svg.split("\n")[1..-2].join(", ")
second_content = second_svg.split("\n")[1..-2].join(", ")

svg = Victor::SVG.new width: "100%", height: "100%"
svg << first_content
svg << second_content

svg.save 'final.svg'