Konva-SVG-Import: Bild oder bearbeitbare Pfade wählen

Verwende Konva.Image, wenn du ein vollständiges SVG auf einem Canvas platzieren möchtest. Verwende separate Konva.Path-Knoten, wenn deine Anwendung einzelne Pfadformen umfärben oder verändern muss. Das Laden eines SVG-Bildes erzeugt nicht automatisch für jedes darin enthaltene Element ein Konva-Objekt. Der SVG-Leitfaden von Konva beschreibt das als unterschiedliche Ansätze.

Für eine Logoauswahl oder ein Kompositionswerkzeug kann ein einzelnes Bild ausreichen. Bei einem zweifarbigen Abzeichen, dessen Bereiche separate Einstellungen brauchen, zählt die Objektstruktur. Entscheide vor der Wahl des Ladewegs, was der Nutzer bearbeiten muss, und bewahre die SVG-Quelle neben der Canvas-Szene auf.

Wähle die Darstellung vor dem Import

Konvas Path-Tutorial akzeptiert SVG-Pfaddaten über data. Das ist der Wert des d-Attributs eines Pfads, nicht das vollständige SVG-Dokument. Das Kopieren von d-Werten allein übernimmt weder die Transformation der übergeordneten Gruppe noch geerbte Farbe oder das viewBox-Verhalten des SVG.

Es gibt außerdem eine separate Frage zur Quelldatei: Enthält das SVG überhaupt Pfade? Verwende den Leitfaden zur Prüfung eingebetteter Rasterbilder, wenn die Grafik eine in SVG verpackte Bitmap ist. Auch ein gültiges pfadbasiertes SVG kann in Konva zu einem einzigen Bildknoten werden; dadurch wird die Quelldatei nicht zu einem falschen Vektor.

Zweifarbiges Beispiel mit sichtbarem Füllungstest

Die folgende eigene Bildmarke enthält zwei von Hand erstellte Pfade mit expliziten Füllungen. Das linke Canvas lädt beide als ein Bild. Das rechte Canvas erstellt aus derselben Geometrie zwei Path-Knoten. Beide erhalten die Anforderung einer rosa Füllung und eine Skalierung von 1,3.

Das rosa Rechteck links ist ein nützlicher Beleg: imageNode.fill() ändert den Hintergrund der Bildform, während die deckenden grünen und gelben Bereiche ihre Quellfarben behalten. Rechts ändert paths[0].fill() nur den ersten Bereich. Dieser Test verwendet eigene Geometrie, kein PerfectVector-Konvertierungsergebnis.

Speichere Folgendes als HTML-Datei und stelle sie über deinen lokalen Entwicklungsserver bereit. Sie legt Konva 10.6.0 fest, erstellt zwei Stages mit 320 × 240 und wartet vor dem Zeichnen auf die Dekodierung des SVG-Bildes. Der Code entspricht dem Vergleich, der für die Aufnahme ausgeführt wurde.

<div id="image-scene"></div>
<div id="path-scene"></div>
<script src="https://unpkg.com/konva@10.6.0/konva.min.js"></script>
<script type="module">
const parts = [
  { data: 'M20 80 C20 30 70 20 100 40 L100 140 C60 140 20 120 20 80 Z', fill: '#176b55' },
  { data: 'M100 40 C150 20 180 50 180 85 C180 120 145 140 100 140 Z', fill: '#e9b949' }
];
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">${parts.map(p => `<path d="${p.data}" fill="${p.fill}"/>`).join('')}</svg>`;
const source = new Image();
source.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
await source.decode();
 
function makeStage(container) {
  const stage = new Konva.Stage({ container, width: 320, height: 240 });
  const layer = new Konva.Layer();
  stage.add(layer);
  return { stage, layer };
}
const imageScene = makeStage('image-scene');
const pathScene = makeStage('path-scene');
const imageNode = new Konva.Image({
  image: source, x: 30, y: 16, width: 200, height: 160
});
imageScene.layer.add(imageNode);
const group = new Konva.Group({ x: 30, y: 16 });
const paths = parts.map(p => new Konva.Path(p));
group.add(...paths);
pathScene.layer.add(group);
 
// Compare the same fill request on the two representations.
imageNode.fill('#db567d');
paths[0].fill('#db567d');
 
// Resize both without changing their source geometry.
imageNode.scale({ x: 1.3, y: 1.3 });
group.scale({ x: 1.3, y: 1.3 });
imageScene.layer.draw();
pathScene.layer.draw();
 
const png = pathScene.stage.toDataURL({ pixelRatio: 2 });
const exported = new Image();
exported.src = png;
await exported.decode();
</script>

In diesem bewusst kleinen Beispiel hat jeder Pfad seine eigene Farbgebung und verwendet dieselben Koordinaten. Die Gruppe gibt den beiden bearbeitbaren Pfaden eine gemeinsame Position und Skalierung. Das Ändern der Gruppenskalierung lässt die Pfaddaten (data) jedes Pfads unverändert; es ändert, wo und wie groß die Gruppe gezeichnet wird.

Für eine vorhandene vertrauenswürdige SVG-Datei, die nur als Ganzes platziert werden soll, zeigt das Image-Tutorial den üblichen Bildladeablauf. Lade die SVG-URL als Bild, warte auf das Laden und übergib es dann an Konva.Image. Eine React-Komponente, die SVG-Markup rendert, ist ein anderer Wert als das vom Canvas erwartete Bildobjekt.

Übertrage bei komplexer Grafik mehr als Pfaddaten

Das parts-Array des Beispiels ist ein explizites Modell für zwei bekannte Formen. Es ist kein SVG-Importer. Prüfe vor einem ähnlichen Ansatz mit exportierter Grafik, was ihr Erscheinungsbild erzeugt:

• Eine Gruppentransformation kann alle untergeordneten Elemente verschieben, drehen oder skalieren. Erhalte diese Beziehung oder rechne die Transformation bewusst in die Geometrie ein.
• Farbgebung kann von einem übergeordneten Element oder einer CSS-Regel stammen. Ermittle die beabsichtigte Füllung und Kontur, statt anzunehmen, jeder Pfad deklariere sie selbst.
• Verläufe, Beschneidungen, Masken und Filter haben eigene Definitionen und Referenzen. Eine kopierte d-Zeichenfolge rekonstruiert diese Effekte nicht.
• Text und Grundformen können separate Behandlung brauchen. Setze nicht voraus, dass jedes sichtbare Objekt bereits ein Pfad ist.

Halte beim Testen ein Rendering des Originals neben deiner Rekonstruktion. Beginne mit einem erkennbaren Bereich, vergleiche seine Position und Farbe und füge erst dann die übrigen Formen hinzu. Der SVG-Bearbeitungsleitfaden behandelt Quellbereinigung, wenn die Objektstruktur schwer zu bearbeiten ist.

Wenn einzelne Pfadeinstellungen unnötig sind, kann das Laden des vollständigen SVG als Bild diese Rekonstruktionsarbeit vermeiden. Konva dokumentiert auch das Rendern von SVG mit einer externen Bibliothek wie canvg und anschließendes Platzieren des resultierenden Canvas in einem Konva.Image. Das bleibt eine Bilddarstellung; es gibt dem Nutzer keine separaten Konva-Knoten für jeden Quellpfad. Sieh dir die dokumentierten Optionen an.

Bei Grafik, die nur eine andere Quellfarbe benötigt, kannst du alternativ das SVG selbst aktualisieren und sein Bild erneut laden. Konvas Maintainer beschreibt diesen Ablauf in react-konva-Issue 530. Verwende eine strukturierte Bearbeitung, die zu deinem bekannten SVG passt, statt wahllos jede Füllung zu ersetzen und beabsichtigte Farbunterschiede zu verlieren.

Behandle Canvas-Export als Rasterausgabe

Das Beispiel ruft pathScene.stage.toDataURL({ pixelRatio: 2 }) auf. Seine Stage mit 320 × 240 erzeugt ein dekodiertes PNG mit 640 × 480. Ein höheres pixelRatio ändert die exportierten Pixelabmessungen; es verwandelt das PNG nicht in bearbeitbares SVG. Konvas Exportdokumentation erklärt diese Einstellung.

Halte diese drei Ausgaben getrennt:

1. Das ursprüngliche SVG zur Vektorbearbeitung und zum Vergleich.
2. Die Szenendaten deiner Anwendung einschließlich Pfad- oder Bildreferenzen und der von deiner Anwendung unterstützten Bearbeitungen.
3. Ein PNG oder anderer Rasterexport für Einsatzzwecke, die ein gerendertes Bild benötigen.

Öffne das exportierte PNG erneut und prüfe Abmessungen und kleine Details. Teste das SVG-Bild außerdem in den von deiner Anwendung unterstützten Browsern; der Konva-SVG-Leitfaden weist auf Unterschiede in der Rendering-Kompatibilität hin. Dieses Beispiel testet ein einfaches eigenständiges SVG, belegt also keine Unterstützung für jede exportierte Datei oder jeden Effekt.

Beurteile Vektorqualität nicht allein anhand der Canvas-Vorschau. Der Leitfaden zu verpixelten SVGs unterscheidet Quellgeometrie von Rastervorschauen und Darstellungsgrößen.

Wann PerfectVector bei der Quelle hilft

Wenn deine Ausgangsdatei nur ein PNG- oder JPG-Motiv ist, kann PerfectVector bearbeitbare SVG-Geometrie rekonstruieren, bevor du die Konva-Szene aufbaust. Konvertiere das Bild in Vektoren, öffne das Ergebnis in einem Editor und prüfe Silhouette, Löcher und Farbbereiche, bevor du Pfade in deine Anwendung überträgst.

Vektorisierung erstellt weder ein Konva-Szenenmodell noch einen Parser für beliebige SVGs. Du wählst weiterhin die Darstellung und überträgst die dafür benötigten Eigenschaften. Wenn du bereits eine brauchbare SVG-Masterdatei hast, arbeite von dieser Datei aus. Bei Fotos oder gemalter Textur, die Pixel bleiben sollen, ist ein Bildknoten oft ohne Nachzeichnen die passende Darstellung.

Prüfe den Import mit deiner eigenen Grafik

Bevor du ein SVG in einen wiederverwendbaren Editor einfügst:

1. Wähle abhängig von den benötigten Nutzereinstellungen einen vollständigen Bildknoten oder separate Formknoten.
2. Ändere die Farbe eines Bereichs und bestätige, dass sich nur das gewünschte Objekt ändert.
3. Skaliere das vollständige Design und prüfe Abstände, Konturdarstellung und Beschneidung.
4. Exportiere mit den benötigten Pixelabmessungen und öffne die Rasterdatei erneut.
5. Öffne die gespeicherte SVG-Masterdatei unabhängig davon erneut, damit ein Canvas-Export nie deine einzige Kopie wird.

FAQ

Macht Konva.Image die Pfade innerhalb eines SVG bearbeitbar? Nein. Es zeigt das SVG als einen Bildknoten. Um einzelne Pfadbereiche zu steuern, erstelle separate Path-Knoten aus geeigneten Pfaddaten oder verwende einen SVG-Bearbeitungsablauf, der die Dokumentstruktur erhält.

Warum fügt fill ein Rechteck hinzu, statt mein SVG umzufärben? Bei einem Image-Knoten zeichnet die Füllung die Bildform hinter dem Bildinhalt. Sie schreibt die Füllungen innerhalb des SVG nicht um. Bearbeite das Quell-SVG und lade es erneut oder verwende separate Path-Knoten, wenn deine Anwendung einzelne Farbeinstellungen benötigt.

Exportiert ein höheres pixelRatio eine Vektordatei? Nein. In diesem Beispiel erzeugt pixelRatio 2 ein PNG mit doppelter Breite und Höhe der Stage. Behalte die SVG-Quelle separat zur Vektorbearbeitung.

Quellen

1. Konva — SVG auf Canvas — Erklärt Optionen mit Image, Path und externem Renderer sowie Grenzen der Browser-Kompatibilität.
2. Konva — Path-Tutorial — Dokumentiert das Erstellen eines Path aus SVG-Pfaddaten und expliziten Farbgebungseigenschaften.
3. Konva — Image-Tutorial — Zeigt das Laden eines Bildes und seine Platzierung in einer Konva-Szene.
4. Konva — Hochwertiger Bildexport — Erklärt Rasterexport und den Einfluss von pixelRatio auf Ausgabeabmessungen.
5. Konva — react-konva-Issue 530 — Dokumentiert den Ansatz des Maintainers, SVG-Bildfarben durch Quellbearbeitung und erneutes Laden zu ändern.

Beginnst du mit einem Icon, das nur als Rasterbild vorliegt? Verwandle dein Bild in SVG-Pfade, prüfe die rekonstruierten Farbbereiche und teste einen Bereich in Konva, bevor du den Rest deines Editors implementierst.