Excalidraw-SVG-Import: Was wird bearbeitbar?

Wenn du ein SVG in Excalidraw ziehst, erhältst du möglicherweise ein scharfes, skalierbares Bild, ohne seine einzelnen Pfade bearbeiten zu können. Wenn du einen Teil umfärben oder verschieben musst, brauchst du eine Excalidraw-Szene aus nativen Elementen. Ein SVG-zu-Excalidraw-Konverter kann diese Elemente erzeugen, doch das Ergebnis muss trotzdem visuell geprüft werden. Die Excalidraw-Diskussion zum SVG-Import beschreibt genau dieses Problem eines Einzelobjekts gegenüber bearbeitbaren Teilen.

Wir testeten ein kleines zweifarbiges Icon mit einem transparenten Loch. Ein Konverter mit festgelegter Version erzeugte drei auswählbare Excalidraw-Elemente, füllte aber das Loch, das im SVG offen war. Das erinnert daran: Bearbeitbarkeit und Wiedergabetreue sind separate Prüfungen.

Drei mögliche Bedeutungen von „SVG in Excalidraw“

Der dritte Fall läuft in die entgegengesetzte Richtung. Ein Werkzeug kann Excalidraw-Quelldaten in einen SVG-Export einbetten, damit sich seine eigene Zeichnung zur Bearbeitung erneut öffnen lässt. Die Excalidraw-Erweiterung für VS Code dokumentiert beispielsweise .excalidraw.svg-Dateien mit eingebetteten Szenendaten. Das bedeutet nicht, dass eine beliebige SVG-Illustration bereits Excalidraw-Formen enthält.

Wenn sich die Gruppierung einer importierten Grafik nicht aufheben lässt, identifiziere zuerst die Struktur des ausgewählten Objekts. Unser Leitfaden zum Aufheben von SVG-Gruppierungen unterscheidet Bildobjekte, zusammengesetzte Pfade und echte Gruppen; Excalidraw fügt dieser Frage zur Quelldatei sein eigenes Szenenformat hinzu.

Wenn du nur die SVG-Pfade bearbeiten musst, folge den Boxy-SVG-Prüfungen für Nachzeichnen oder Import und behalte eine SVG-Masterdatei. Konvertiere in eine Excalidraw-Szene, wenn du native Szenenelemente brauchst.

Kleiner Konvertierungstest: Die Formen blieben, das Loch nicht

Unsere Quelle war ein von Hand erstelltes SVG: ein blaugrüner Ring aus einem zusammengesetzten Pfad mit Even-odd-Füllregel sowie ein goldener Kreis. Die Mitte des Rings war im Original wirklich transparent und nicht weiß übermalt. Wir verarbeiteten ihn mit dem offiziellen svg-to-excalidraw-Repository und der npm-Paketversion 0.0.2, speicherten die zurückgegebene Szene als .excalidraw-Datei, öffneten sie in Excalidraw und exportierten zum Vergleich ein transparentes PNG.

Originalquelle und konvertierte Szene

Die Konvertierung meldete keine Fehler und erzeugte drei native Elemente: zwei blaugrüne Zeichenelemente und eine goldene Ellipse. Der goldene Akzent war separat auswählbar. Die transparente Mitte bestand jedoch die Darstellungsprüfung nicht. Im ursprünglichen Rendering war ihr mittlerer Pixel transparent; im transparenten PNG-Export von Excalidraw war der entsprechende Pixel deckend blaugrün. Eine fehlerfreie Konvertierungsantwort garantierte kein übereinstimmendes Bild.

Das ist ein einzelner, bewusst begrenzter Test, keine Aussage über jedes SVG oder jeden Konvertierungsweg. Das separate SVG-Chop-Experiment behandelt komplexe SVG-Strukturen ebenfalls als Konvertierungsherausforderung. Ein kurzer Blick auf die Objektanzahl reicht nicht. Löcher, Masken, Beschneidungen, Verläufe, Text und verschachtelte Gruppen verdienen eigene Tests, wenn dein Design sie verwendet.

So prüfst du dein eigenes SVG

1. Behalte das ursprüngliche SVG. Speichere vor dem Importieren oder Konvertieren eine Kopie. Prüfe, ob der Bereich, den du ändern möchtest, bereits ein separater Pfad oder eine Form ist. Ein einzelner zusammengesetzter Pfad kann ein Loch haben, ohne separate auswählbare Teile zu besitzen.
2. Entscheide, was „bearbeitbar“ für diese Zeichnung bedeutet. Wenn du die Illustration nur skalieren und platzieren musst, reicht möglicherweise ein Bild. Wenn du ein Teil verschieben oder umfärben musst, muss es als natives Szenenelement vorliegen.
3. Teste den Konvertierungsweg an einer Kopie. Das Open-Source-Projekt SVG-to-Excalidraw konvertiert SVG-Geometrie in Excalidraw-Szeneninhalte. Prüfe seine aktuelle Einrichtung und halte die verwendete Paketversion fest. Importiere oder öffne die resultierende Szene, statt anzunehmen, eine gewöhnliche Bildplatzierung lege Pfade offen.
4. Zähle die Teile und wähle sie aus. Kannst du den Akzent ohne den Grundkörper auswählen? Kannst du ihn umfärben, während die andere Farbe gleich bleibt? Öffne die gespeicherte Szene erneut und wiederhole die Bearbeitung.
5. Vergleiche das Bild, nicht nur die Objekte. Lege Original und Excalidraw-Export auf kontrastierende Hintergründe. Prüfe Löcher, Überlappungen, Kanten, Text und alle benötigten Effekte. Unser Test hätte eine Prüfung auf „drei Elemente“ bestanden, wäre hier aber durchgefallen.

Wenn die Konvertierung einen beabsichtigten Teil in viele Zeichenelemente zerlegt, kann Gruppieren das Verschieben erleichtern. Die ursprüngliche Pfadstruktur stellt es aber nicht wieder her. Wenn ein Loch verschwindet, überarbeite die Quelle oder verwende für diese Grafik einen anderen Editor. Bewahre die bearbeitbare Masterdatei im Vektoreditor auf, wenn Excalidraw ein benötigtes Merkmal der Grafik nicht erhalten kann.

Wo PerfectVector ins Spiel kommt

PerfectVector hilft früher im Ablauf nur dann, wenn die Quelle Rastergrafik ist, etwa ein flaches PNG-Icon, das noch keine SVG-Pfade hat. Konvertiere die Clipart in SVG, prüfe, ob Farbbereiche und Negativräume erhalten blieben, und bereinige die Geometrie, bevor du eine Excalidraw-Konvertierung versuchst. Der Leitfaden zur Vorbereitung kleiner Icons behandelt Klarheit und Einheitlichkeit der Quelle. Vektorisierung allein kann eine Bildplatzierung in Excalidraw nicht in native Szenenelemente verwandeln. Auch ein neu nachgezeichnetes SVG braucht die oben beschriebene Prüfung in der Zielanwendung.

Bei einem SVG, das bereits geeignete Vektorformen enthält, überspringst du erneutes Nachzeichnen. Vergleiche stattdessen das Original mit der konvertierten Szene. Der verwandte Leitfaden zu benutzerdefinierten SVG-Formen in draw.io unterscheidet für einen anderen Diagrammeditor ähnlich zwischen Bildern und nativen Formen.

FAQ

Kann ich ein platziertes SVG-Bild in Excalidraw-Formen zerlegen? Eine Auswahl auf Bildebene legt die ursprünglichen SVG-Teile nicht als native Excalidraw-Elemente offen. Verwende einen Konvertierungsablauf, wenn du separate Szenenformen brauchst, und prüfe dann das Ergebnis.

Erhält eine SVG-zu-Excalidraw-Konvertierung jedes Loch? Setze das nicht voraus. In unserem Test mit Version 0.0.2 wurde ein Even-odd-Ring zu bearbeitbaren Zeichenelementen, seine transparente Mitte aber ausgefüllt. Vergleiche deine eigene Quelle und die gespeicherte Szene, besonders dort, wo Freiraum wichtig ist.

Sollte ich ein SVG vor dem Importieren vektorisieren? Nein. Wenn das SVG bereits die benötigten Formen hat, prüfe seine Struktur und die Excalidraw-Konvertierung. Vektorisierung ist relevant, wenn dein Ausgangsbild Rastergrafik wie PNG oder JPG ist.

Quellen

1. Excalidraw-Diskussion #6082 — Nutzerfrage zu einem importierten SVG, das sich wie ein einzelner Block statt bearbeitbarer Teile verhält.
2. Excalidraw — svg-to-excalidraw — Offizieller Open-Source-Konvertierungsweg für den Test des eigenen Icons mit festgelegter Version.
3. Excalidraw-Editor-Erweiterung für VS Code — Dokumentiert Excalidraw-Szenendateien und SVG/PNG-Exporte mit eingebetteten Szenendaten.
4. Minixcali — SVG Chop — Unabhängiges Experiment zur Umwandlung von SVG-Teilen in Excalidraw-Elemente mit Einschränkungen bei der Geometrie.

Wenn dein Ausgangspunkt ein PNG-Icon ist, erstelle mit PerfectVector einen SVG-Kandidaten, prüfe seine separaten Bereiche und Löcher und teste dann die gespeicherte Excalidraw-Szene, bevor du sie in einer Zeichnung verwendest.