Graphviz-SVG-Bilder: Knotengrafiken portabel halten

Ein Graphviz-Diagramm kann Vektorknoten und Pfeile enthalten, während die individuelle Knotengrafik weiterhin auf eine separate Bilddatei verweist. Wenn diese Grafik nach dem Verschieben des SVGs verschwindet, prüfe die erzeugte Bildreferenz, bevor du die Zeichnung änderst. Möglicherweise fehlt ein Teil des Lieferpakets.

In der unten getesteten SVG-Ausgabe behält Graphviz motif.svg als verknüpftes Bild bei. Im vollständigen Paket wird es angezeigt; wenn du nur das Diagramm verschiebst, fehlt es. Eine ausdrücklich gepackte Kopie enthält die Grafikdaten und wird im selben Browsertest angezeigt. Auch nach diesem Verpackungsschritt bleibt ein SVG-Bildelement bestehen; das Motiv wird nicht zu nativen Graphpfaden.

Behalte die DOT-Quelle für Knotennamen und Beziehungen. Bewahre das Grafikoriginal separat auf und teste genau die Ausgabe im Viewer oder Veröffentlichungsprozess, in dem sie verwendet werden soll.

Unterscheide Knoten, Grafik und Dateireferenz

Das Graphviz-Attribut image benennt die Grafik, die in einem Knoten angezeigt wird. Es ersetzt weder die Identität des Knotens im Graphen noch seine Beziehungen. Die Dokumentation verlangt Quellabmessungen; gib bei SVG-Bildern ausdrücklich width und height mit passenden Einheiten an.

Das ursprüngliche Motiv ist hier eine Zeichnung aus zwei Pfaden mit einem Koordinatenraum von 96 mal 64. Die äußeren Abmessungen sind 96pt mal 64pt. Der umgebende Knoten und der Pfeil gehören zu Graphviz.

Ein Bildelement kann auf SVG-Grafiken oder auf Pixel verweisen. Um eine Rasterquelle zu untersuchen, nutze die separate Diagnose eingebetteter Bilder in SVGs. Ein Dateiname mit der Endung .svg reicht nicht aus, um den Inhalt einer der Dateien zu bestimmen.

Teste ein kleines Beispiel mit ausdrücklich gewähltem Renderer

Wir verwendeten @viz-js/viz 3.31.0, einen WebAssembly-Build, der Graphviz 16.1.0 meldet, mit der Layout-Engine dot und der integrierten SVG-Ausgabe. Das ist ein Test dieses Builds und Renderers, keine Aussage darüber, dass jede Graphviz-Installation Bilder identisch lädt.

Installiere in einem neuen Node.js-Projektordner das Paket in der festgelegten Version:

npm install @viz-js/viz@3.31.0

Speichere die Originalgrafik als motif.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="96pt" height="64pt" viewBox="0 0 96 64">
  <path fill="#173b40" fill-rule="evenodd"
    d="M48 4C70 4 88 17 88 32S70 60 48 60S8 47 8 32S26 4 48 4Z
       M48 14C31 14 19 22 19 32S31 50 48 50S77 42 77 32S65 14 48 14Z"/>
  <path fill="#28bfa3"
    d="M43 20H53V27H60V37H53V44H43V37H36V27H43Z"/>
</svg>

Speichere den Graphen als diagram.dot:

digraph G {
  graph [rankdir=LR, bgcolor="white", margin=0.1];
  node [shape=box, fontname="Arial", fontsize=16,
        color="#173b40", penwidth=1.5,
        fixedsize=true, width=1.8, height=1.1];
  artwork [label="", image="motif.svg", imagescale=true];
  review [label="Review"];
  artwork -> review [color="#173b40", penwidth=1.5];
}

Speichere anschließend Folgendes als render.mjs und führe in diesem Ordner node render.mjs aus:

import { instance } from '@viz-js/viz';
import fs from 'node:fs';
 
const viz = await instance();
const dot = fs.readFileSync('diagram.dot', 'utf8');
const svg = viz.renderString(dot, {
  engine: 'dot',
  format: 'svg',
  images: [{ name: 'motif.svg', width: '96pt', height: '64pt' }]
});
 
fs.mkdirSync('bundle', { recursive: true });
fs.copyFileSync('motif.svg', 'bundle/motif.svg');
fs.writeFileSync('bundle/diagram.svg', svg);
process.stdout.write(`Graphviz ${viz.graphvizVersion}\n`);

Die API-Dokumentation von Viz.js beschreibt die Option images als Angaben zur Bildgröße. Damit erhält das Layout Informationen über diese benannte Grafik; die Dateidaten werden dadurch nicht in das Ergebnis eingefügt. Ausdrückliche Einheiten verhindern, dass eine Zahl ohne Einheit als CSS-Pixel verstanden wird. Für Abmessungen ohne Einheit verwendet die API Punkte.

Für eine native Graphviz-Installation beschreibt die offizielle Dokumentation zu image lokale Bildressourcen und Abmessungen, die aus der Quelldatei gelesen werden. Übertrage die Einrichtung der WebAssembly-Metadaten nicht einfach auf einen nativen Befehl mit der Annahme, dass derselbe Lademechanismus verwendet wird.

Prüfe die Ausgabe des Renderers

Unser erzeugtes SVG enthält dieses Element:

<image xlink:href="motif.svg"
       width="118.8px" height="79.2px"
       preserveAspectRatio="xMinYMin meet"
       x="5.4" y="-79.2"/>

Abmessungen und Position sind beobachtete Werte dieses Testbeispiels. Für die Weitergabe ist xlink:href="motif.svg" entscheidend: Das Ergebnis benötigt weiterhin eine Ressource an diesem relativen Pfad.

Kopiere nur diagram.svg in einen anderen Ordner und lasse die Grafik zurück. Vergleiche es mit dem vollständigen Paket. Wir stellten beide Ordner über lokales HTTP bereit und zeigten jedes SVG als Dokument über ein HTML-Element object an.

Die erzeugten Knotenrahmen und der Pfeil bleiben erhalten, wenn das verknüpfte Motiv fehlt. Ein erneutes Erstellen des Graphlayouts liefert die fehlende Datei nicht nach. Stelle den erwarteten Speicherort wieder her, liefere das gesamte Paket oder wähle einen zum Ziel passenden Verpackungsschritt.

Ein SVG als Dokument zu öffnen und es über ein HTML-Element img anzuzeigen, sind unterschiedliche Tests. MDNs Hinweise zu SVG als Bild erklären, dass Bildkontexte externe Ressourcen einschränken können, während Daten-URLs sie einbetten können. Die dort beschriebenen Einschränkungen für Bildkontexte gelten nicht für direkte SVG-Dokumente oder die Dokumenteinbettung über object und iframe. Prüfe den Kontext, den du tatsächlich verwendest.

Verpacke dieses einfache Motiv ausdrücklich

Für dieses ursprüngliche, eigenständige Motiv ersetzt das folgende Skript genau eine bekannte Referenz durch die SVG-Daten der Datei. Speichere es als package.mjs und führe es nach dem Rendern aus:

import fs from 'node:fs';
 
const svg = fs.readFileSync('bundle/diagram.svg', 'utf8');
const needle = 'xlink:href="motif.svg"';
if (svg.split(needle).length !== 2) {
  throw new Error('Expected exactly one motif reference');
}
 
const data = 'data:image/svg+xml;base64,' +
  fs.readFileSync('bundle/motif.svg').toString('base64');
const packaged = svg.replace(needle, `xlink:href="${data}"`);
fs.writeFileSync('self-contained.svg', packaged);

Dies ist ein gezieltes Verpackungsbeispiel, kein allgemeiner SVG-Inliner. Es behandelt die bekannte Referenz in dieser Ausgabe und ein Motiv ohne externe Schriften, Bilder, Stylesheets oder andere Abhängigkeiten. Bei komplexeren Grafiken musst du die Abhängigkeiten separat prüfen.

Die gepackte Kopie zeigte das Motiv in unserem Browsertest. Der Vergleich der beiden Ausgabezeichenfolgen nach dem Ausblenden des Bildreferenzwerts ergab identische Graphgeometrie. Die Datei enthält weiterhin ein Bildelement; dessen Referenz beginnt jetzt mit data:image/svg+xml;base64,.

Das Einbetten von SVG-Bilddaten kann diese Dateipfadabhängigkeit beseitigen und zugleich die Vektorquelle der Grafik erhalten. Es macht die Grafik nicht zu einer nativen Graphviz-Knotenform, fügt keine Verbindungspunkte innerhalb der Grafik hinzu und garantiert nicht, dass ein anderer Editor die Pfade direkt zugänglich macht. Teste das Importverhalten beim Empfänger.

Verwechsle außerdem svg_inline nicht mit dem Einbetten von Bildern. Graphviz beschreibt diese Option in der Dokumentation zur SVG-Ausgabe als Ausgabe ohne Header für die Einbindung in HTML. Für denselben Graphen erzeugte svg_inline weiterhin die Referenz motif.svg. Der Ausgabemodus verpackte die Grafik nicht.

Unterscheide Abmessungen und Skalierung von Portabilität

Die Graphviz-Referenz zu imagescale unterscheidet das Einpassen des Bilds in den Knoten von der natürlichen Größe der Quelle. In diesem Beispiel skaliert imagescale=true das Bild gleichmäßig, damit es hineinpasst. Die Option both skaliert Breite und Höhe getrennt und kann dadurch die Proportionen verändern.

Wenn das Motiv erscheint, aber verzerrt ist, prüfe die Skalierungsoption. Wenn nur ein Teil erscheint, prüfe die eigenen Begrenzungen und den verfügbaren Platz im Knoten. Wenn es nach dem Verschieben der Datei verschwindet, prüfe zuerst den Ressourcenpfad. Der SVG-Größenleitfaden erklärt, wie sich deklarierte Größe und Zeichnungskoordinaten unterscheiden.

Die offizielle Seite zur SVG-Ausgabe weist darauf hin, dass sich die Cairo-Ausgabe in XML-Lesbarkeit und Transformierbarkeit von der integrierten SVG-Ausgabe unterscheiden kann. Wir haben Cairo hier nicht getestet. Halte den Renderer in einem reproduzierbaren Projekt ausdrücklich fest und wiederhole die Verpackungsprüfung, wenn du ihn änderst.

Rekonstruiere verlorene Grafikquellen vorab

PerfectVector kann helfen, wenn ein geeignetes illustratives Motiv nur noch als PNG oder Scan vorhanden ist. Der Workflow zur Rekonstruktion wissenschaftlicher Grafiken liefert einen Vektorkandidaten, den du vor der Verwendung prüfen kannst. Schneide das Bild auf das Motiv zu, prüfe Silhouette und Leerflächen und kontrolliere anschließend Begrenzungen und Abmessungen des heruntergeladenen SVGs, bevor du es zum Graphen hinzufügst.

Diese Rekonstruktion stellt weder Knotenbeziehungen noch Pfeilbedeutungen oder DOT-Beschriftungen wieder her. Behalte diese in der Graphquelle. Verwende das ursprüngliche SVG, wenn es vorhanden ist, zeichne ein einfaches Symbol neu, wenn das leichter zu pflegen ist, und behalte Fotos als Rasterbilder. Der Überblick zur Bildvektorisierung erklärt die Grenze der Rekonstruktion.

Andere Diagrammwerkzeuge verpacken individuelle Grafiken anders. Der Leitfaden zu Mermaid-Icons behandelt registrierte Icon-Daten, während individuelle SVG-Grafiken in draw.io ein importiertes Bild von einer nativen Schablone unterscheidet. Berücksichtige bei der Grafikvorbereitung die Anforderungen des Zielprogramms.

FAQ

Bettet die Graphviz-SVG-Ausgabe mein Knotenbild automatisch ein? In der getesteten integrierten SVG-Ausgabe enthält das Diagramm eine Bildreferenz auf die separate Datei motif.svg. Prüfe deine eigene Ausgabe und liefere deren Abhängigkeiten mit oder verwende einen getesteten Verpackungsschritt.

Fügt svg_inline die Pfade eines SVG-Bilds in den Graphen ein? Nein. Es ist ein Ausgabemodus ohne Header für die Einbindung in HTML. In unserem Test blieb die externe Referenz motif.svg erhalten.

Ist ein eigenständiges SVG dasselbe wie native, bearbeitbare Knotengeometrie? Nein. Das gepackte Beispiel behält ein Bildelement mit SVG-Daten. Die Graphstruktur bleibt in DOT, und der empfangende Editor bestimmt, wie er diese Grafik zugänglich macht.

Quellen

1. Graphviz — image — Lokale Knotenbildressourcen und erforderliche SVG-Abmessungen.
2. Graphviz — imagescale — Gleichmäßiges Einpassen und unabhängige Skalierung von Breite und Höhe.
3. Graphviz — SVG-Ausgabe — Integrierte Ausgabe und Cairo-Ausgabe sowie die Bedeutung von svg_inline.
4. Viz.js — API — Bildgrößenmetadaten, ausdrückliche Einheiten und Aufrufe zum SVG-Rendern.
5. MDN — SVG als Bild — Einschränkungen externer Ressourcen in Bildkontexten und der Unterschied zur Dokumenteinbettung.

Teste einen Knoten im tatsächlichen Weitergabeprozess, bevor du eine ganze Grafikbibliothek vorbereitest. Wenn nur ein Rastermotiv übrig ist, bereite einen SVG-Grafikkandidaten vor, prüfe Zwischenräume und Proportionen, füge ihn dann zu deinem DOT-Graphen hinzu und kontrolliere die verschobene oder gepackte Ausgabe im empfangenden Viewer.