Eigene SVG-Formen in draw.io: Bilder oder Stencils?

Entscheide bei einer eigenen SVG-Form in draw.io, was du nach dem Einfügen ändern musst. Ein eingebettetes SVG-Bild ist hilfreich, wenn du das Erscheinungsbild der Grafik möchtest. Ein nativer XML-Stencil ist der Weg, Diagrammgeometrie, Stile und konkrete Verbindungspunkte zu definieren. Eine eigene Bibliothek kann beide Arten von Elementen zur Wiederverwendung speichern.

Diese Optionen lösen unterschiedliche Probleme. Ein SVG in einer Bibliothek zu speichern verwandelt seine Pfade allein nicht in eine native Diagrammform. Die Referenz für eigene draw.io-Formen unterscheidet eingebettete Bilder von Formen, die im eigenen XML-Format definiert werden.

Wenn du deine Diagramme in Mermaid schreibst, verwende den Ablauf für eigene SVG-Icon-Pakete, um die Grafik zu registrieren und Beschriftungen sowie Verbindungen in der Diagrammquelle zu behalten.

Das Verhalten wählen, bevor du die Grafik konvertierst

Stell dir ein kleines Gerätesymbol vor: ein rechteckiger Körper mit einer runden Anzeige. Du möchtest es in einigen Prozessdiagrammen wiederverwenden.

In einem Diagramm für eine Präsentation muss das Gerät möglicherweise nur einheitlich aussehen. In einem Verbindungsdiagramm sollen sich Linien vielleicht an der Mitte seiner linken und rechten Kante anschließen. Halte diese Anforderung fest, bevor du eine weitere Datei vorbereitest.

Ein SVG einfügen, wenn sein Erscheinungsbild genügt

Der offizielle Leitfaden zum Einfügen von SVG dokumentiert das Ziehen einer SVG-Datei vom Computer auf die Zeichenfläche. Du kannst auch Arrange → Insert → Image verwenden. Wähle bei der Aufforderung Actual Size und passe die Größe der eingefügten Grafik anschließend nach Bedarf an.

Verwende beim Gerätebeispiel eine Arbeitskopie und prüfe die kleine runde Anzeige nach der Größenänderung. Eine in voller Größe klar erkennbare Form kann in einem kompakten Diagramm ihr hilfreiches Detail verlieren.

Behalte die bearbeitbare Grafikquelle separat. Wenn du den Kreis innerhalb des Geräts verschieben musst, ändere das im Quelleditor und ersetze das Übergabebild. Suche nicht allein deshalb lange nach einem Befehl zum Aufheben von Gruppen, weil das SVG mehrere sichtbare Teile enthält. Unser Leitfaden zu SVG-Objekten und Gruppen erklärt, wie die Dateistruktur diese Erwartung beeinflusst.

Auch eine gewöhnliche SVG-Zeichnung eines ganzen Diagramms verlangt Aufmerksamkeit. Draw.ios Einfügeleitfaden erklärt, dass normales SVG nicht die Verbindungsinformationen trägt, die zur Rekonstruktion eines bearbeitbaren Diagramms nötig sind. Behalte die originale Diagrammdatei, wenn du sie hast.

Das Umfärben eines eingebetteten SVGs hat eigene Voraussetzungen

Draw.io bietet eine begrenzte Verbindung zwischen eingebetteter SVG-Grafik und seinen Farbreglern. Der Farbleitfaden für eingebettete SVGs verwendet CSS-Regeln innerhalb des SVGs und die Einstellung editableCssRules im Stil des eingefügten Objekts. Diese Funktion gilt für eingebettete Bilder, nicht für verlinkte Bilder.

Wähle bei einem bereits mit CSS-Regeln aufgebauten SVG das eingefügte Bild, öffne Edit Style und ergänze:

editableCssRules=.*;

Das dokumentierte Muster wählt alle geeigneten Regeln aus. Es gehört in den Stil des draw.io-Objekts und nicht als Zeile in das Zeichnungsmarkup des SVGs.

Prüfe die entstehenden Regler, bevor du darauf eine Bibliothek aufbaust. Wenn keine hilfreichen Farbregler erscheinen, vergleiche die Quelle mit dem CSS-Klassenbeispiel des offiziellen Leitfadens. Gehe nicht davon aus, dass die Einstellung beliebige SVG-Füllungs- und Konturattribute umorganisiert, die Geräteanzeige abtrennt oder Verbindungspunkte erstellt.

Wenn die Grafik nur eine dauerhafte Farbänderung braucht, kann es einfacher sein, die SVG-Quelle zu bearbeiten. Speichere eine Kopie und prüfe das importierte Erscheinungsbild erneut.

Einen nativen Stencil für eine bewusst definierte Form verwenden

Ein nativer Stencil beschreibt die Form in draw.ios eigener XML-Syntax. Er ist keine in .xml umbenannte SVG-Datei. Das Tutorial für eigene Formen verwendet Arrange → Insert → Shape, um den Formeditor zu öffnen, und Preview, um die Definition zu prüfen.

Hier ist ein kleiner selbst erstellter Ausgangspunkt für das Gerätesymbol:

<shape name="two-port-device" w="100" h="60" aspect="fixed" strokewidth="inherit">
  <connections>
    <constraint x="0" y="0.5" perimeter="0" name="left"/>
    <constraint x="1" y="0.5" perimeter="0" name="right"/>
  </connections>
  <background>
    <rect x="0" y="0" w="100" h="60"/>
  </background>
  <foreground>
    <fillstroke/>
    <ellipse x="40" y="20" w="20" h="20"/>
    <stroke/>
  </foreground>
</shape>

Das äußere Rechteck und der mittige Kreis sind bewusst einfach. Die Koordinatenwerte definieren den Zeichenraum dieser Illustration. Sie sind keine physischen Gerätemaße.

Die XML-Referenz legt relative Verbindungskoordinaten fest. Mit perimeter="0" platzieren diese beiden Verbindungsvorgaben Punkte in der Mitte der linken und rechten Kante. Sie verlangt außerdem die Zeichenoperation der Hintergrundgeometrie am Anfang des Vordergrunds. Deshalb steht fillstroke dort.

Zeige die Form in der Vorschau an, füge sie einem Testdiagramm hinzu und probiere das tatsächlich benötigte Verhalten aus:

1. Ändere ihre Füll- und Linienfarbe.
2. Schließe an jedem vorgesehenen Mittelpunkt eine Verbindungslinie an.
3. Verschiebe das Gerät und prüfe beide Anschlüsse.
4. Ändere seine Größe und prüfe Kreis, Kontur und Verbindungspositionen.

Dies ist eine kleine Definition zum Anpassen, kein allgemeiner SVG-zu-Stencil-Konverter. Wenn dein illustriertes Gerät viele dekorative Details enthält, entscheide, welche davon in das Diagrammsymbol gehören. Einige wesentliche Grundformen neu zu zeichnen kann leichter zu pflegen sein, als jede Kontur in einen Stencil zu übernehmen.

Eine Bibliothek speichern, nachdem das Element seine Prüfungen besteht

Eine Bibliothek ist der Wiederverwendungsschritt. Der Leitfaden für eigene Bibliotheken dokumentiert File → New Library, die Wahl des Speicherorts sowie das Hinzufügen von Bildern oder Ziehen von Formen von der Zeichenfläche. Eigene Bibliotheken verwenden die Endung .xml.

Speichere das Gerät unter einem Namen, der den Inhalt beschreibt, etwa „Gerätegrafik“ oder „Gerät mit zwei Anschlüssen“. Halte sie als separate Einträge vor, wenn beide hilfreich sind.

Öffne anschließend ein neues Diagramm und füge das gespeicherte Element ein. Wiederhole eine aussagekräftige Bearbeitung: Färbe die Grafik um, wenn das konfiguriert wurde, oder schließe eine Verbindungslinie an den nativen Stencil an. So erkennst du eine Bibliothek, die eine ältere Version deines Symbols enthält.

Ein .xml-Dateiname allein sagt nicht, ob das Element native Geometrie ist. Sowohl eine Bibliothek als auch eine Stencil-Definition verwenden XML, eine Bibliothek kann aber Bilder, Gruppen, eigene Formen oder ganze Diagramme enthalten. Prüfe das Verhalten des eingefügten Elements.

Rastergrafik nur rekonstruieren, wenn du eine Vektor-Masterdatei brauchst

Wenn die originale Geräteillustration nur noch als PNG oder Scan vorliegt, kann PerfectVectors Clipart-zu-SVG-Ablauf einen Grafikkandidaten vorbereiten. Beschneide eine Kopie auf das Motiv, sieh dir das Vektorergebnis in der Vorschau an und prüfe Außenkontur, rundes Detail, leere Bereiche und unerwünschten Hintergrund. Lade das SVG herunter und teste es über den Bildeinfügeweg.

Damit erhältst du eine Quelle zur Prüfung des Erscheinungsbilds. Sie definiert nicht die linken und rechten Geräteanschlüsse, die Bedeutung der Verbindungen oder natives Stencil-XML. Erstelle diese bewusst, wenn das Diagramm sie braucht.

Ein sehr einfaches Rechteck-und-Kreis-Symbol lässt sich möglicherweise schneller direkt zeichnen. Nachzeichnen ist hilfreicher, wenn die erhaltene Illustration charakteristische Kurven hat, die du bewahren möchtest. Bei handgezeichneten Motiven behandelt der Leitfaden zur Vorbereitung von Kartenillustrationen die Bereinigung gezeichneter Grafik vor dem Nachzeichnen.

Wenn das SVG beim Vergrößern weiterhin pixelig wird, prüfe mit der Diagnose für Rasterbilder in SVG, ob es eine eingebettete Bitmap enthält. Der Überblick zur Bildvektorisierung erklärt den umfassenderen Unterschied zwischen dem Erhalten von Pixeln und dem Rekonstruieren von Formen.

FAQ

Wird ein importiertes SVG zu einem nativen draw.io-Stencil? Nein. Der Bildeinfügeablauf bettet Grafik ein. Ein eigener nativer Stencil verwendet draw.ios XML-Formdefinition für Geometrie, Stile und Verbindungspunkte.

Kann ich Farben in einem eingebetteten SVG ändern? Draw.io dokumentiert Farbbearbeitung über geeignete SVG-CSS-Regeln und die Einstellung editableCssRules im Stil des eingefügten Objekts. Prüfe die Quellstruktur und die nach dem Einfügen angebotenen Regler.

Konvertiert eine eigene Bibliothek SVG-Pfade in native Formen? Eine Bibliothek speichert wiederverwendbare Elemente, darunter Bilder und eigene native Formen. Ein Bild darin zu speichern ergänzt allein keine native Geometrie oder Verbindungssemantik.

Erstellt das Vektorisieren eines PNGs Verbindungspunkte für mein Diagramm? Nein. Vektorisierung kann Grafikkonturen rekonstruieren. Definiere die Verbindungspunkte und das native Diagrammverhalten separat, wenn du sie brauchst.

Quellen

1. draw.io — SVG-Bilder in ein Diagramm einfügen — Bildeinfügung, Größenfestlegung und Grenzen der Rekonstruktion von Diagrammverbindungen aus SVG.
2. draw.io — Komplexe eigene Formen erstellen und bearbeiten — Native XML-Geometrie, Verbindungsvorgaben und Zeichenoperationen.
3. draw.io — Farben in eingebetteten SVG-Bildern bearbeiten — Bearbeitung von CSS-Regeln und Anforderungen an eingebettete gegenüber verlinkten Bildern.
4. draw.io — Eigene Formen erstellen — Stencil-Editor, Vorschauablauf und Standardstile.
5. draw.io — Mit eigenen Formenbibliotheken arbeiten — Erstellen, Speichern und Wiederverwenden gemischter Bibliothekselemente.

Wähle das benötigte Verhalten, bereite ein Gerätesymbol vor und teste es in einem neuen Diagramm. Wenn nur Rastergrafik übrig ist, bereite einen SVG-Kandidaten vor, prüfe seine Konturen und kontrolliere das eingefügte Bild, bevor du es in deiner Bibliothek speicherst.