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

Für diejenigen, die die npm y Aufgaben-Läufer wie grunt o gulp Ich empfehle dringend die Verwendung des folgenden Knotenmoduls: https://github.com/svg-sprite/svg-sprite

Es nimmt eine Reihe von SVG-Dateien, optimiert sie und bäckt sie in SVG-Sprites verschiedener Typen zusammen mit geeigneten Stylesheet-Ressourcen.

Es ist konfigurierbar, so dass es möglich ist, beide Sprite-Modi zu erstellen <view> y <symbol> . Sie können also sowohl in html als auch in css verwendet werden.

Die Konfiguration des Modus sieht wie folgt aus:

// Common mode properties
const config = {
    mode: {
        <mode>: {
            dest: "<mode>", // Mode specific output directory
            prefix: "svg-%s", // Prefix for CSS selectors
            dimensions: "-dims", // Suffix for dimension CSS selectors
            sprite: "svg/sprite.<mode>.svg", // Sprite path and name
            bust: true || false, // Cache busting (mode dependent default value)
            render: { // Stylesheet rendering definitions
                /* -------------------------------------------
                css: false, // CSS stylesheet options
                scss: false, // Sass stylesheet options
                less: false, // LESS stylesheet options
                styl: false, // Stylus stylesheet options
                <custom>: ... // Custom stylesheet options
                -------------------------------------------    */
            },
            example: false // Create an HTML example document
        }
    }
}

Weitere Einzelheiten finden Sie in deren Dokumente .

Answer 2

Vielleicht können Sie svg-sprite Es ist ein Nodejs-Tool.

svg-sprite is a low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites

Answer 3

Heißt das, Sie haben völlig unterschiedliche SVG-Dokumente? Welchen Sinn hat es dann, sie in ein Dokument zu packen? Ich bin verwirrt.

Wenn Sie meinen, dass Sie ein svg-Element in ein anderes einschließen wollen, ist das durchaus möglich, und in diesem Sinne ist Ihr Beispiel syntaktisch korrekt.

Wenn Sie aus irgendeinem Grund wirklich unterschiedliche Dokumente in einem einzigen SVG-Dokument unterbringen wollen, dann könnten Sie CSS verwenden, um die Anzeige der einzelnen Dokumente ein- und auszuschalten.

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

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

oder etwas in dieser Richtung.