Fabric.js-SVG-Import: Grafik auf Canvas bearbeiten

Warte zum Import bearbeitbarer SVGs in Fabric.js mit await auf loadSVGFromString() oder loadSVGFromURL() und füge die zurückgegebenen Objekte anschließend einem Canvas hinzu. Behalte eine Referenz auf den zu bearbeitenden Teil, ändere dessen Füllung und exportiere mit canvas.toSVG(). Grafik als Bild zu laden bietet ein anderes Bearbeitungsmodell: Das Auswählen dieses Bilds macht nicht jeden Farbbereich als separate Form zugänglich.

Dieser Unterschied ist für einen Produktkonfigurator, Abzeicheneditor oder umfärbbare Icons wichtig. Du brauchst Objekte, die den Teilen entsprechen, die dein Nutzer ändern darf. Eine Datei mit der Endung .svg garantiert diese Struktur nicht.

Diese Anleitung verwendet Fabric.js 7.4.0 und eine kleine von Hand erstellte Lampe. Sie testet drei Formen beim Import, Umfärben und Export. Es ist ein eigenes Code-Testbeispiel, keine PerfectVector-Konvertierung und keine Behauptung, dass jede SVG-Funktion denselben Ablauf übersteht.

Das Objektmodell vor dem Loader wählen

Fabric.js parst SVG in eigene Canvas-Objekte. Du bearbeitest diese über Fabrics API; sie sind keine aktiven SVG-DOM-Elemente innerhalb des Canvas. Die aktuelle loadSVGFromString-Referenz dokumentiert ein Promise mit dem Parsing-Ergebnis und einen Reviver, der jedes Quellelement samt erzeugtem Objekt erhält.

Leite die Objektstruktur nicht aus dem Erscheinungsbild ab. Zwei Farben können zu separaten Pfaden gehören, während mehrere unverbundene Inseln zu einem Pfad gehören können. Der Leitfaden zum Aufheben von SVG-Gruppen erklärt diese Quelldateidiagnose.

Ein kleines Beispiel für Import, Umfärben und Export ausführen

Beginne in einem leeren Ordner. Installiere die festgelegte Abhängigkeit:

npm install --save-exact fabric@7.4.0

Speichere dies als index.html:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Fabric SVG import test</title>
<canvas id="editor" width="320" height="240"></canvas>
<button id="recolor">Recolor shade</button>
<button id="export">Export SVG</button>
<div id="output"></div>
<pre id="report"></pre>
<script type="module" src="main.js"></script>
</html>

Speichere dies als main.js. Der relative Modulpfad lässt dieses kleine Beispiel ohne Bundler laufen. Importiere in einer gebündelten Anwendung dieselben Namen aus fabric.

import { Canvas, loadSVGFromString } from './node_modules/fabric/dist/index.min.mjs';
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
  <path id="shade" fill="#e6a23c" d="M115 40 H205 L230 135 H90 Z"/>
  <rect id="stem" x="151" y="135" width="18" height="57" fill="#214c54"/>
  <path id="base" fill="#214c54" d="M110 192 H210 L220 210 H100 Z"/>
</svg>`;
const canvas = new Canvas('editor', { width: 320, height: 240 });
const parts = new Map();
const parsed = await loadSVGFromString(svg, (element, object) => {
  const id = element.getAttribute('id');
  if (id) parts.set(id, object);
});
canvas.add(...parsed.objects.filter(Boolean));
canvas.requestRenderAll();
function report(exported) {
  const xml = new DOMParser().parseFromString(exported, 'image/svg+xml');
  const data = {
    version: '7.4.0',
    importedObjects: canvas.getObjects().length,
    types: canvas.getObjects().map(object => object.type),
    shadeFill: parts.get('shade').fill,
    exportedPaths: xml.querySelectorAll('path').length,
    exportedRects: xml.querySelectorAll('rect').length,
    exportedImages: xml.querySelectorAll('image').length,
  };
  document.querySelector('#report').textContent = JSON.stringify(data, null, 2);
  document.querySelector('#output').innerHTML = exported;
}
document.querySelector('#recolor').onclick = () => {
  parts.get('shade').set('fill', '#397e86');
  canvas.requestRenderAll();
  document.querySelector('#report').textContent = 'Shade recolored. Export to check delivery SVG.';
};
document.querySelector('#export').onclick = () => report(canvas.toSVG());
report(canvas.toSVG());

Stelle den Ordner über HTTP bereit, statt die HTML-Datei direkt zu öffnen. Wenn beispielsweise Python installiert ist, führe python3 -m http.server 8000 aus und öffne http://localhost:8000. Klicke auf Recolor shade und dann Export SVG. Der Button zeigt die exportierte Zeichenfolge unter dem Canvas an; er lädt keine Datei herunter.

Diese Demo fügt ausschließlich den Export ihres eigenen festen Testbeispiels in die Vorschau ein. Verwende diese innerHTML-Vorschau nicht als allgemeinen Upload-Handler für nicht vertrauenswürdige SVGs. Das Beispiel lässt außerdem Fehlerbehandlung auf Anwendungsebene und Dateivalidierung weg.

Die Map erfasst während des Parsens die Quell-IDs. Das Umfärben adressiert den Lampenschirm über diese ausdrückliche Referenz, statt anzunehmen, das erste zurückgegebene Objekt sei immer der gewünschte Teil. Entscheide in einem produktiv eingesetzten Editor, wie diese Kennungen und Referenzen beim Speichern und erneuten Öffnen eines Dokuments erhalten werden.

Was der Test gezeigt hat

Unser Testbeispiel wurde als drei Objekte importiert: path, rect und path. Nachdem sich der Lampenschirm von #e6a23c zu #397e86 geändert hatte, zeigte die Exportvorschau den neuen Schirm, während Stiel und Fuß ihre ursprüngliche dunkle Füllung behielten. Der Export enthielt zwei Pfade, ein Rechteck und keine image-Elemente.

Diese Prüfungen belegen, dass dieses Beispiel nach dem Export Vektorgeometrie bleibt. Sie belegen nicht den Erhalt des ursprünglichen XML, der Gruppierung, der CSS-Regeln oder sämtlicher Funktionen einer anderen Datei. Behalte die Originalvorlage und vergleiche eine Übergabekopie in der Anwendung, die sie erhalten wird.

Callback-Tutorials nicht mit der Promise-API vermischen

Ältere Beispiele rufen häufig fabric.loadSVGFromString(svg, callback) auf und erwarten, dass dieser Callback das gesamte Objektarray erhält. Das ist nicht die Rolle des zweiten Arguments in der aktuellen API: Es ist ein Reviver pro Objekt. Warte mit await auf das Parsing-Ergebnis für die vollständige Sammlung.

Fabrics Migrationsleitfaden für 6.0 erklärt den Wechsel zu benannten Importen und Promise-basierten APIs. Prüfe die installierte Paketversion, bevor du ein altes Snippet anpasst; wenn du nur die Importanweisung ersetzt, bleibt die Ladelogik fehlerhaft.

Für eine SVG-Datei derselben Origin ist der entsprechende Ausgangspunkt:

import { loadSVGFromURL } from 'fabric';
const parsed = await loadSVGFromURL('/artwork.svg');
canvas.add(...parsed.objects.filter(Boolean));
canvas.requestRenderAll();

Die loadSVGFromURL-Dokumentation weist darauf hin, dass sie das SVG abruft und die Same-Origin-Policy einhalten muss. Wenn der entfernte Host deine Origin nicht erlaubt, behebt das Ändern des Gruppierungscodes den Netzwerkfehler nicht. Teste zuerst eine von deiner eigenen Anwendung bereitgestellte Datei und prüfe dann die fehlgeschlagene Anfrage sowie die CORS-Konfiguration des entfernten Servers.

Bearbeitbarkeit getrennt vom Erscheinungsbild prüfen

Eine erfolgreiche Darstellung beantwortet eine Frage: Ist etwas erschienen? Ein Editor braucht weitere Prüfungen.

1. Wähle den Bereich aus, der sich ändern soll. Bestätige, dass sich kein anderer Teil mitändert.
2. Färbe über die set-Methode des Objekts um und fordere wie im Beispiel eine Neudarstellung an.
3. Exportiere und öffne das Ergebnis unabhängig. Fabrics Canvas.toSVG-API erzeugt SVG-Markup aus dem Canvas-Zustand.
4. Prüfe alles, wovon deine tatsächliche Grafik abhängt, etwa Konturen, Beschneidung, Verläufe, Text oder verschachtelte Transformationen. Das einfache Testbeispiel oben prüft diese Funktionen nicht.
5. Speichere, öffne erneut und wiederhole die gewünschte Bearbeitung in deinem eigenen Editor, bevor du den Ablauf als vollständig behandelst.

Wenn der Import ein Bildobjekt erzeugt, untersuche die Quelle auf ein eingebettetes Rasterbild. Der Leitfaden zu Rasterinhalt innerhalb von SVG zeigt, warum eine SVG-Hülle Pixeln keine bearbeitbaren Pfade gibt. Wenn die Quelle bereits brauchbare Vektorformen hat, arbeite am Import und an der Objektorganisation, statt sie erneut nachzuzeichnen.

Wenn Rastergrafik eine vorgelagerte Konvertierung braucht

Wenn deine einzige Quelle ein flaches PNG oder JPG ist und Nutzer dessen Farbbereiche bearbeiten müssen, kann PerfectVectors Bild-zu-Vektor-Ablauf beim Erstellen eines SVG-Kandidaten helfen. Vergleiche das Ergebnis mit dem Original, prüfe die Pfade und stelle vor dem Import in Fabric.js fest, ob die benötigten Bereiche unabhängig bearbeitbar sind.

Nachzeichnen weist keine anwendungsspezifische Bedeutung wie Schirm, Stiel oder Fuß zu. Die Namen unseres Testbeispiels wurden bewusst festgelegt. Ergänze nach der Prüfung der konvertierten Geometrie deine eigene Teilezuordnung und Bearbeitungsregeln. Für ein wiederverwendbares Icon-Set behandelt der PNG-zu-SVG-UI-Kit-Ablauf Quellenvorbereitung und Konsistenzprüfungen.

Behalte Fotografien als Rasterbilder, wenn sie Fotografien bleiben sollen. Behalte ein geeignetes originales SVG, wenn es bereits die benötigten Formen enthält. Der Überblick zur Vektorisierung kann helfen zu entscheiden, ob Nachzeichnen überhaupt in den Ablauf gehört.

FAQ

Importiert Fabric.js SVG als bearbeitbare Pfade? Es kann unterstützten SVG-Inhalt in Fabric-Objekte parsen. Die Bearbeitbarkeit hängt von der Quellstruktur ab: Ein Pfad, eine Gruppe von Formen und ein eingebettetes Rasterbild bieten nicht dieselben Bearbeitungsoptionen. Prüfe die zurückgegebenen Objekte und teste die konkrete benötigte Änderung.

Warum schlägt ein älteres loadSVGFromString-Beispiel fehl? Ältere Tutorials erwarten möglicherweise einen Abschluss-Callback als zweites Argument. Die aktuelle API gibt ein Promise zurück und verwendet dieses Argument als Reviver pro Objekt. Passe deinen Code an die installierte Version an und warte mit await auf das Parsing-Ergebnis.

Erhält toSVG die Originaldatei exakt? Erwarte kein identisches Quelldokument. Es erzeugt SVG aus dem Fabric-Canvas-Zustand. Behalte die Originalvorlage und prüfe das exportierte Erscheinungsbild sowie die Strukturen, die dein Zielablauf benötigt.

Kann das Importieren eines PNG seine einzelnen Bereiche bearbeitbar machen? Ein PNG zu platzieren zeichnet es nicht in separate Vektorbereiche nach. Wenn diese Änderungen erforderlich sind, bereite zuerst geeignete Vektorgeometrie vor, prüfe die entstehenden Teile und definiere ihre Rollen in deiner Anwendung.

Quellen

1. Fabric.js — loadSVGFromString — Promise-Rückgabewert und Reviver-Vertrag zwischen Quellelement und Objekt.
2. Fabric.js — Auf Fabric.js 6.0 aktualisieren — Benannte Importe und Migration von Callbacks zu Promises.
3. Fabric.js — loadSVGFromURL — URL-Parsing und Same-Origin-Beschränkungen beim Abrufen.
4. Fabric.js — Canvas-API — Export des Canvas-Zustands in SVG-Markup.

Wenn die fehlende Komponente bearbeitbare Geometrie aus Rastergrafik ist, erstelle einen SVG-Kandidaten mit PerfectVector. Prüfe zuerst die Formen und belege dann, dass dein Fabric.js-Editor den vorgesehenen Teil umfärben und das Ergebnis korrekt exportieren kann.