> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# SVG.js: Grafik importieren, Pfad ändern und SVG exportieren

> Importiere vertrauenswürdiges SVG-Markup in SVG.js, färbe einen benannten Pfad um und prüfe Exporte der ganzen Wurzel oder nur ihrer Kinder. Behalte Geometrie und prüfe gespeicherte Dateien.

Source: https://perfectvector.com/de/blog/svgjs-import-export-artwork

Language: de
Author: Irene Kim
Published: 2026-10-06T08:00:00+09:00
Updated: 2026-10-06T08:00:00+09:00

Um Grafik für eine Bearbeitung einzelner Teile in SVG.js zu importieren, übergib vertrauenswürdiges SVG-Markup an `.svg()`, finde das vorgesehene Element über seine vergebene ID und ändere seine Füllung. Exportiere die vollständige SVG-Wurzel der Grafik für eine eigenständige Datei. Ein Export nur der Kindelemente ist ein Fragment. Es benötigt eine Wurzel mit den gewünschten Abmessungen und der `viewBox`, bevor du es als Dokument weitergibst.

Dieser Leitfaden verwendet eine selbst erstellte hohle Raute und ein separates Dreieck. Das Dreieck wechselt von Ocker zu Koralle, während die Raute ihre blaugrüne Füllung und Öffnung behält. Wir testeten das vollständige Beispiel unten mit SVG.js **3.2.6**, festgelegt auf das offizielle [Release 3.2.6](https://github.com/svgdotjs/svg.js/releases/tag/3.2.6). Diese Beobachtungen betreffen zwei einfache selbst erstellte Pfade, nicht jede Funktion, die ein anderes SVG enthalten könnte.

## Entscheide, ob du aktive Formen oder ein Bild brauchst

Eine JavaScript-Importanweisung, die eine Asset-URL erzeugt, beantwortet eine Ladefrage. Sie setzt allein noch nicht die Pfade der Datei in den aktiven SVG-Baum deines Editors. SVG.js’ aktuelle [Import-/Exportdokumentation](https://svgjs.dev/docs/3.2/importing-exporting/) beschreibt den Markupimport und das Abrufen eines äußeren SVG-Elements oder seiner Kinder.

| Repräsentation                                                 | Was du in unserem Beispiel ansprechen kannst | Ausgabeprüfung                                           |
| -------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------------- |
| Vertrauenswürdiges Markup in eine aktive SVG-Wurzel importiert | Den benannten Pfad `accent`                  | Bearbeitete Wurzel prüfen und ihren Export erneut öffnen |
| Über ein Bildelement geladenes SVG                             | Das Bildelement als Ganzes                   | Bildinhalt separat prüfen                                |
| Markup nur der Kindelemente                                    | Zwei Pfadelemente ohne ursprüngliche Wurzel  | Gewählte Wurzel, Abmessungen und `viewBox` bereitstellen |

SVG innerhalb eines Bilds bleibt SVG-Inhalt. Im Kontrollfall mit Bildhülle hat der umgebende SVG-Baum jedoch ein Bildelement und keine direkten Pfade. Die Suche nach `accent` in diesem Baum findet nichts. Sie greift nicht in das Dokument des eingebetteten Bilds hinein. MDN beschreibt den separaten [SVG-Bildkontext](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) und seine Einschränkungen. Leite das Bearbeitungsmodell nicht aus einer scharf aussehenden Darstellung ab.

Für die umfassendere Einbettungsentscheidung lies [Inline-SVG im Vergleich zu einem Bild](https://perfectvector.com/de/blog/inline-svg-vs-img). Möchtest du stattdessen Fabrics Canvas-Objektmodell, behandelt die [Fabric.js-Importanleitung](https://perfectvector.com/de/blog/fabricjs-import-svg) einen anderen Parser und eine andere Bearbeitungs-API.

## Bearbeite einen benannten Pfad und speichere jede Darstellung

Speichere den vollständigen Code unten als `starter.html` in einem leeren Ordner. Stelle ihn über HTTP bereit, etwa mit `python3 -m http.server 8000`, und öffne `http://localhost:8000/starter.html`. Das Skript lädt das festgelegte Paket von seinem CDN, daher braucht diese Vorlage eine Netzwerkverbindung.

Die Seite zeigt die ursprüngliche Grafik, die aktiv bearbeitete Kopie und einen Kontrollfall mit Bildhülle. Ihre Links laden die ursprüngliche Masterdatei, die vollständigen Wurzeln vor und nach der Änderung, das Textfragment nur mit Kindelementen, eine neu umschlossene Kopie und die Bildhülle herunter. Der Bericht liest Pixel aus SVG-Bildern aus, die auf ein Canvas gezeichnet wurden. Er exportiert kein PNG.

```html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Original SVG.js artwork import and export</title>
<style>
  body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
  main { display: grid; grid-template-columns: repeat(3, 260px); gap: 20px; }
  figure { margin: 0; }
  svg, img { display: block; background: white; border: 1px solid #bbb; }
  pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Trusted artwork, one fill edit and two export forms</h1>
<main>
  <figure><img id="original" alt="Original artwork"><figcaption>Original SVG image</figcaption></figure>
  <figure><div id="live"></div><figcaption>Imported live SVG, accent edited</figcaption></figure>
  <figure><div id="wrapper"></div><figcaption>Image wrapper, original artwork</figcaption></figure>
</main>
<p id="downloads"></p>
<pre id="report"></pre>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.2.6/dist/svg.min.js"></script>
<script>
  const markup = '<svg xmlns="http://www.w3.org/2000/svg" id="original-artwork" width="240" height="160" viewBox="0 0 240 160">'
    + '<path id="body" d="M80 20 L140 80 L80 140 L20 80 Z M80 56 L104 80 L80 104 L56 80 Z" fill="#176b5b" fill-rule="evenodd"/>'
    + '<path id="accent" d="M172 48 L220 80 L172 112 Z" fill="#d4a53a"/></svg>';
  const url = text => 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(text);
  async function pixels(text) {
    const image = new Image();
    image.src = url(text);
    await image.decode();
    const canvas = document.createElement('canvas');
    canvas.width = 240;
    canvas.height = 160;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
    const rgba = (x, y) => [...ctx.getImageData(x, y, 1, 1).data];
    return { naturalWidth: image.naturalWidth, naturalHeight: image.naturalHeight,
      opening: rgba(80, 80), body: rgba(80, 40), accent: rgba(188, 80), corner: rgba(0, 0) };
  }
  function inventory(text) {
    const node = new DOMParser().parseFromString(text, 'image/svg+xml').documentElement;
    return { root: node.localName, viewBox: node.getAttribute('viewBox'),
      paths: [...node.querySelectorAll('path')].map(p => ({ id: p.id, d: p.getAttribute('d'), fill: p.getAttribute('fill') })),
      imageCount: node.querySelectorAll('image').length };
  }
  async function run() {
    document.getElementById('original').src = url(markup);
    const host = SVG().addTo('#live').size(240, 160).viewbox(0, 0, 240, 160);
    host.svg(markup);
    const artwork = host.findOne('#original-artwork');
    const before = artwork.svg();
    const accent = artwork.findOne('#accent');
    const beforeD = accent.attr('d');
    accent.fill('#b95434');
    const full = artwork.svg();
    const children = artwork.svg(false);
    const rewrapped = SVG().size(240, 160).viewbox(0, 0, 240, 160);
    rewrapped.svg(children);
    const wrappedFull = rewrapped.svg();
    const imageWrapper = SVG().addTo('#wrapper').size(240, 160).viewbox(0, 0, 240, 160);
    imageWrapper.image(url(markup)).size(240, 160);
    const wrapperFull = imageWrapper.svg();
    const files = { 'master.svg': markup, 'before.svg': before, 'edited.svg': full,
      'children-only.txt': children, 'rewrapped.svg': wrappedFull, 'image-wrapper.svg': wrapperFull };
    for (const [name, text] of Object.entries(files)) {
      const a = document.createElement('a');
      a.href = name.endsWith('.txt') ? 'data:text/plain;charset=utf-8,' + encodeURIComponent(text) : url(text);
      a.download = name;
      a.textContent = name;
      a.style.marginRight = '12px';
      document.getElementById('downloads').append(a);
    }
    const results = {};
    for (const [name, text] of Object.entries(files)) {
      if (name.endsWith('.svg')) results[name] = { inventory: inventory(text), pixels: await pixels(text) };
    }
    document.getElementById('report').textContent = JSON.stringify({
      requestedPackageVersion: '3.2.6',
      scriptURL: document.querySelector('script[src]').src,
      selectedAccentFound: Boolean(accent), selectedAccentDUnchanged: beforeD === accent.attr('d'),
      allPathDUnchanged: JSON.stringify(inventory(before).paths.map(p => p.d)) === JSON.stringify(inventory(full).paths.map(p => p.d)),
      childrenHasOuterSVG: /<svg[\s>]/i.test(children),
      wrapperDirectPathCount: imageWrapper.find('path').length,
      wrapperAccentFound: Boolean(imageWrapper.findOne('#accent')), results
    }, null, 2);
  }
  run();
</script>
</html>

```

Das importierte Markup enthält eine verschachtelte Wurzel namens `original-artwork`. Das Beispiel wählt diese Wurzel vor dem Export. Die Ausgabekopie hat dadurch ihren ursprünglichen Viewport von `240 × 160`, statt von einem unbeteiligten Elterncontainer abzuhängen. Danach wählt es `accent` innerhalb dieser Wurzel. SVG.js dokumentiert [selektorbasierte Referenzen und Elementmethoden](https://svgjs.dev/docs/3.2/referencing-creating-elements/). Ausdrückliche Teilnamen vermeiden die Abhängigkeit von der Pfadreihenfolge.

Der Code ist bewusst auf sein eigenes festes Markup begrenzt. Er ist **kein Sicherheitsfilter für SVG-Uploads**. Eine beliebige Zeichenfolge zu parsen oder einzufügen belegt nicht, dass sie sicher ist. [MDNs DOMParser-Referenz](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString) unterscheidet das Parsen von den Risiken beim Einfügen nicht vertrauenswürdiger Inhalte. Entwirf vor der Anpassung dieser Routine für Uploads eine separate Validierungs- und Vertrauensrichtlinie.

## Prüfe das gespeicherte Ergebnis statt nur der aktiven Vorschau

Unser tatsächlicher Browserlauf ergab diese Prüfungen:

| Gespeicherte Darstellung             | Pfade im Dokumentbaum | Bilder | Dreiecksfüllung                                |
| ------------------------------------ | --------------------- | ------ | ---------------------------------------------- |
| Ursprüngliche Masterdatei            | 2                     | 0      | `#d4a53a`                                      |
| Vollständige Wurzel vor Bearbeitung  | 2                     | 0      | `#d4a53a`                                      |
| Vollständige Wurzel nach Bearbeitung | 2                     | 0      | `#b95434`                                      |
| Kinder in neuer vollständiger Wurzel | 2                     | 0      | `#b95434`                                      |
| Bildhülle                            | 0                     | 1      | Ursprüngliches Ocker innerhalb ihrer Bilddaten |

Beide ursprünglichen Pfad-`d`-Zeichenfolgen blieben in den Vorher-/Nachher-Exporten identisch. Die Probe im Dreiecksinneren wechselte von RGBA `(212, 165, 58, 255)` zu `(185, 84, 52, 255)`. Die Probe im Rauteninneren blieb `(23, 107, 91, 255)`. Öffnung und äußere Ecke behielten Alpha `0`. Alle fünf eigenständigen SVG-Dateien wurden als Bilder mit natürlichen Abmessungen von `240 × 160` erneut geöffnet.

**Einen benannten Teil ändern**

![Schematischer Vergleich gleicher Grafiken mit hohler Raute, bei denen nur ein separates Dreieck von Gold zu Koralle wechselt](https://perfectvector.com/blog/svgjs-import-export-artwork/named-path-edit.webp)

*Schematische Illustration einer Farbänderung an einem einzelnen Teil. Dekorative Grenzen und Pfeile sind Diagrammhinweise. Die ausgeführte Vorlage, das gespeicherte Quellinventar und die Browserpixelprüfungen liefern die tatsächlichen Belege.*

Diese Ergebnisse belegen die gewünschte Bearbeitung für diese Testdatei. Sie belegen weder byteidentische XML-Erhaltung noch Unterstützung aller Filter oder CSS-Funktionen oder Eignung für einen Fertigungsablauf. Die Serialisierung der Bibliothek kann das Dokumentmarkup ändern, während diese bestimmten Pfadzeichenfolgen erhalten bleiben. Behalte die ursprüngliche Masterdatei neben der Ausgabekopie.

Prüfe für deine Grafik die tatsächlich verwendeten Strukturen: Namen und Gruppen, Beschneidung, Verläufe, Transformationen, Konturen und Text. Öffne die exportierte Datei erneut in der empfangenden Anwendung und wiederhole die vorgesehene Bearbeitung. Der [SVG-Bearbeitungsleitfaden](https://perfectvector.com/de/blog/how-to-edit-an-svg) hilft bei der Diagnose der Quellstruktur, bevor du den Importcode änderst.

## Behandle den Kinderexport bewusst als Fragment

In diesem Lauf gab `artwork.svg(false)` zwei Pfade ohne äußeren `svg`-Tag zurück. Der Viewport der Grafikwurzel fehlte. Die separate SVG-Wurzel `rewrapped` liefert Abmessungen von `240 × 160` und dieselbe `viewBox`, bevor sie diese Kinder aufnimmt. Ihre exportierte Datei rendert anschließend das geprüfte korallfarbene Dreieck.

Wähle je nach Ziel zwischen vollständigem Dokument und Fragment. Behalte für einen eigenständigen Download die gesamte vorgesehene Wurzel. Entscheide beim Einfügen in eine vorhandene Zeichnung, welches Elternkoordinatensystem, welche geerbten Stile und Definitionen diese Kinder verwenden. Diese einfache Testdatei besitzt keine externen Ressourcen oder gemeinsamen Definitionen. Sie testet deshalb nicht, ob ein Fragment mit Verweisen jede benötigte Abhängigkeit mitbringt.

Unser Bildhüllenexport behielt ein kodiertes SVG, dessen dekodierte Bytes der ursprünglichen Masterdatei entsprachen. Dieser Kontrollfall zeigt einen Repräsentationsunterschied, keine Rasterkonvertierung. Ist deine Quelle bereits nutzbare Vektorgeometrie, korrigiere Elementauswahl oder Exportgrenze, bevor du sie erneut nachzeichnest.

## Wenn die Quelle keine bearbeitbaren Pfade hat

Braucht deine flache PNG- oder JPG-Illustration separat umfärbbare Bereiche, [bereite mit PerfectVector einen SVG-Kandidaten vor](https://perfectvector.com/de/image-to-vector). Prüfe Konturen und Öffnungen und vergib dann die Teilnamen, die deine Anwendung benötigt. Vektorisierung weiß nicht, dass ein Bereich `accent` heißen soll, und garantiert nicht, dass ein importiertes Dokument zum Datenmodell deines Editors passt.

Behalte eine geeignete SVG-Masterdatei, wenn diese Formen bereits existieren. Nutze den [Vektorisierungsüberblick](https://perfectvector.com/de/blog/what-is-image-vectorization), um zu entscheiden, ob Raster-zu-Vektor-Vorbereitung überhaupt vor deinen Code gehört.

## Häufige Fragen

**Kann SVG.js eine SVG-Zeichenfolge zur Bearbeitung importieren?**
Ja. Diese Vorlage importiert ihr eigenes vertrauenswürdiges Markup in einen aktiven SVG-Container, wählt einen erstellten Pfad und ändert seine Füllung. Beliebige Uploads brauchen eine separate Vertrauens- und Validierungsrichtlinie. Die Markup-API ist kein Sicherheitsfilter.

**Warum sehe ich die Grafik, finde aber ihren accent-Pfad nicht?**
Prüfe, ob du aktives Markup importiert oder ein Bild platziert hast. Unser Bildhüllen-Kontrollfall zeigt SVG-Grafik, stellt aber keinen direkten accent-Pfad im Baum der Hülle bereit. Prüfe auch das ausgewählte Elternelement und die tatsächlichen IDs der Quelle.

**Ist ein Export nur der Kinder eine vollständige SVG-Datei?**
Nicht in dieser Testdatei. Er enthält zwei Pfade ohne den äußeren SVG-Viewport. Verwende die vorgesehene vollständige Wurzel für eine eigenständige Datei oder liefere beim Einfügen eines Fragments ausdrücklich Zielwurzel und Koordinatensystem.

**Beweist erfolgreiche Bearbeitung, dass der Export jede SVG-Funktion erhält?**
Nein. Wir prüften zwei einfache Pfade, ihre Füllwerte, exakte Pfaddaten und fünf erneut geöffnete Dateien. Teste die Funktionen und empfangende Anwendung, die deine Grafik tatsächlich benötigt, und behalte die ursprüngliche Masterdatei.

## Quellen

1. [SVG.js – Importieren/Exportieren, Version 3.2](https://svgjs.dev/docs/3.2/importing-exporting/) – Markupimport und Serialisierung der vollständigen Wurzel oder nur der Kinder.
2. [SVG.js – Elemente referenzieren/erstellen, Version 3.2](https://svgjs.dev/docs/3.2/referencing-creating-elements/) – Benannte Elemente finden und ihre Eigenschaften ändern.
3. [SVG.js – Release 3.2.6](https://github.com/svgdotjs/svg.js/releases/tag/3.2.6) – Das in der ausgeführten Vorlage festgelegte offizielle Release.
4. [MDN – SVG als Bild](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) – Bildeinbettungskontext und seine Einschränkungen.
5. [MDN – DOMParser.parseFromString](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString) – Markup parsen und nicht vertrauenswürdige Eingaben separat behandeln.

***

Existiert deine Illustration nur als Rasterpixel und braucht Änderungen einzelner Teile, [bereite aus deiner eigenen Grafik einen Vektorkandidaten vor](https://perfectvector.com/de/image-to-vector). Prüfe Umriss und Öffnungen, behalte die Masterdatei und belege dann benannte Bearbeitung und gespeichertes SVG im empfangenden Ablauf.

## Explore

- [Read the HTML article](https://perfectvector.com/de/blog/svgjs-import-export-artwork)
- [SVG-Icons in MapLibre: Pixel und Symbolgröße prüfen](https://perfectvector.com/de/blog/maplibre-svg-symbol-image.md)
- [SVG-Mustertransformation: Füllung drehen, Umriss erhalten](https://perfectvector.com/de/blog/svg-pattern-transform.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)