SVG-Grafiken

VMark bietet erstklassige Unterstützung für SVG — Skalierbare Vektorgrafiken. Es gibt zwei Möglichkeiten, SVG in Ihren Dokumenten zu verwenden, jede für einen anderen Arbeitsablauf geeignet.

Methode	Am besten für	Bearbeitbarer Quellcode?
Bild einbetten ()	Statische SVG-Dateien auf dem Datenträger	Nein
Code-Block (```svg)	Inline-SVG, KI-generierte Grafiken	Ja

SVG als Bild einbetten

Standard-Markdown-Bildsyntax verwenden, um eine SVG-Datei einzubetten:

![Architecture diagram](./assets/architecture.svg)

Dies funktioniert genau wie PNG- oder JPEG-Bilder — Drag-and-Drop, Einfügen oder über die Symbolleiste einfügen. SVG-Dateien werden als Bilder erkannt und inline gerendert.

Wann dies zu verwenden ist: Sie haben eine .svg-Datei (aus Figma, Illustrator, Inkscape oder einem Design-Tool) und möchten sie in Ihrem Dokument anzeigen.

Einschränkungen: Das SVG wird als statisches Bild gerendert. Sie können den SVG-Quellcode nicht inline bearbeiten, und es erscheinen keine Schwenk-/Zoom- oder Export-Steuerelemente.

SVG-Code-Blöcke

Rohe SVG-Markierung in einem umzäunten Code-Block mit der svg-Sprachkennung einwickeln:

```svg
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <rect width="200" height="100" rx="10" fill="#4a6fa5"/>
  <text x="100" y="55" text-anchor="middle" fill="white"
        font-size="18" font-family="system-ui">Hello SVG</text>
</svg>
```text

Das SVG wird inline gerendert — genau wie Mermaid-Diagramme — mit interaktiven Steuerelementen.

VMark-exklusiv

Weder Typora noch Obsidian unterstützen ```svg-Code-Blöcke. Dies ist eine VMark-exklusive Funktion, entwickelt für KI-Arbeitsabläufe, bei denen Tools SVG-Visualisierungen (Diagramme, Illustrationen, Symbole) generieren, die nicht in Mermaids Grammatik passen.

Wann Code-Blöcke zu verwenden sind

• KI-generierte Grafiken — Claude, ChatGPT und andere KI-Tools können SVG-Diagramme, Visualisierungen und Illustrationen direkt generieren. Fügen Sie das SVG in einen Code-Block ein, um es inline zu rendern.
• Inline-SVG-Erstellung — SVG-Quellcode direkt in Ihrem Dokument bearbeiten und Live-Ergebnisse sehen.
• Eigenständige Dokumente — Das SVG lebt innerhalb der Markdown-Datei ohne externe Dateiabhängigkeit.

Bearbeitung im WYSIWYG-Modus

Im Rich-Text-Modus werden SVG-Code-Blöcke automatisch inline gerendert.

Bearbeitungsmodus öffnen

Doppelklicken Sie auf ein gerendertes SVG, um den Quelleditor zu öffnen. Eine Bearbeitungskopfzeile erscheint mit:

Schaltfläche	Aktion
Kopieren	SVG-Quellcode in die Zwischenablage kopieren
Abbrechen (X)	Änderungen zurücksetzen und beenden (auch Esc)
Speichern (Häkchen)	Änderungen anwenden und beenden

Eine Live-Vorschau unterhalb des Editors aktualisiert sich beim Tippen, sodass Sie Ihre Änderungen in Echtzeit sehen können.

Schwenken und Zoomen

Fahren Sie über ein gerendertes SVG, um interaktive Steuerelemente zu enthüllen:

Aktion	Wie
Zoomen	Cmd (macOS) oder Strg (Windows/Linux) gedrückt halten und scrollen
Schwenken	SVG klicken und ziehen
Zurücksetzen	Auf die Zurücksetzen-Schaltfläche klicken (obere rechte Ecke)

Dies sind dieselben Schwenk-/Zoom-Steuerelemente, die für Mermaid-Diagramme verwendet werden.

Als PNG exportieren

Fahren Sie über ein gerendertes SVG, um die Export-Schaltfläche zu enthüllen (oben rechts, neben der Zurücksetzen-Schaltfläche). Klicken Sie darauf, um ein Hintergrunddesign zu wählen:

Design	Hintergrund
Hell	Weiß (#ffffff)
Dunkel	Dunkel (#1e1e1e)

Das SVG wird als PNG mit 2-facher Auflösung über den System-Speicherdialog exportiert.

Quellmodus-Vorschau

Im Quellmodus erscheint ein schwebendes Vorschau-Panel, wenn sich Ihr Cursor innerhalb eines ```svg-Code-Blocks befindet — dasselbe Panel, das für Mermaid-Diagramme verwendet wird.

Funktion	Beschreibung
Live-Vorschau	Aktualisiert sich sofort beim Tippen (kein Entprellen — SVG-Rendering ist instant)
Ziehen zum Verschieben	Kopfzeile ziehen zum Neu-Positionieren
Größe ändern	Beliebige Kante oder Ecke ziehen
Zoom	−- und +-Schaltflächen oder Cmd/Strg + Scrollen (10% bis 300%)

INFO

Die Diagrammvorschau im Quellmodus ist standardmäßig ausgeschaltet. Schalten Sie sie mit Ansicht → Diagramm-Vorschau umschalten (Alt + Mod + P) oder über die Befehlspalette ein.

SVG-Validierung

VMark validiert SVG-Inhalt vor dem Rendering:

• Der Inhalt muss mit <svg oder <?xml beginnen
• Das XML muss wohlgeformt sein (keine Parse-Fehler)
• Das Stammelement muss <svg> sein

Wenn die Validierung fehlschlägt, wird statt der gerenderten Grafik eine Ungültiges SVG-Fehlermeldung angezeigt. Doppelklicken Sie auf den Fehler, um den Quellcode zu bearbeiten und zu korrigieren.

KI-Arbeitsablauf

KI-Coding-Assistenten können SVG direkt in Ihre VMark-Dokumente über MCP-Tools generieren. Die KI sendet einen Code-Block mit language: "svg" und dem SVG-Inhalt, der automatisch inline gerendert wird.

Beispiel-Prompt:

Erstelle ein Balkendiagramm mit vierteljährlichem Umsatz: Q1 $2.1M, Q2 $2.8M, Q3 $3.2M, Q4 $3.9M

Die KI generiert ein SVG-Balkendiagramm, das inline in Ihrem Dokument gerendert wird, mit sofort verfügbaren Schwenk-/Zoom- und PNG-Export-Funktionen.

Vergleich: SVG-Code-Block vs. Mermaid

Funktion	```svg	```mermaid
Eingabe	Rohes SVG-Markup	Mermaid DSL
Rendering	Sofort (synchron)	Async (200ms Entprellung)
Schwenken + Zoomen	Ja	Ja
PNG-Export	Ja	Ja
Live-Vorschau	Ja	Ja
Design-Anpassung	Nein (verwendet eigene SVG-Farben)	Ja (passt sich allen Designs an)
Am besten für	Benutzerdefinierte Grafiken, KI-generierte Visualisierungen	Flussdiagramme, Sequenzdiagramme, strukturierte Diagramme

Tipps

Sicherheit

VMark bereinigt SVG-Inhalt vor dem Rendering. Script-Tags und Event-Handler-Attribute (onclick, onerror usw.) werden entfernt. Dies schützt vor XSS beim Einfügen von SVG aus nicht vertrauenswürdigen Quellen.

Auch externe Verweise werden entfernt: <use> und <image> dürfen auf ein Fragment im selben Dokument (href="#arrowhead") oder eine eingebettete data:image/…-Nutzlast zeigen, eine URL, die vom Rechner weg verweist, wird jedoch verworfen. Ohne dies würde schon das bloße Öffnen eines Dokuments mit einem nicht vertrauenswürdigen Diagramm diese URL abrufen — und damit Ihre IP-Adresse und den Zeitpunkt preisgeben, zu dem Sie die Datei geöffnet haben. Diagrammwerkzeuge wie Mermaid verweisen ausschließlich auf Fragmente, normale Diagramme sind also nicht betroffen.

Das eigene Stylesheet eines SVG (<style>) ist auf dieses SVG beschränkt: Jeder Selektor wird so umgeschrieben, dass er nur innerhalb des SVG greifen kann, aus dem er stammt, sodass ein Diagramm weder den Editor noch ein anderes Diagramm umgestalten kann. Erhalten bleiben nur Stilregeln, @media und @keyframes (Animationsnamen werden pro SVG eindeutig gemacht); @import, @font-face und andere At-Regeln, externe url()-Verweise sowie position: fixed / sticky werden verworfen. <form>-Elemente werden entfernt (ihr Inhalt bleibt erhalten).

Links innerhalb eines gerenderten SVG navigieren nie VMark selbst. Ein Klick auf einen Weblink öffnet ihn in Ihrem Systembrowser; ein relativer Dateilink öffnet die Datei in einem VMark-Tab; javascript:-, file:- und data:-Links werden nie geöffnet.

Größenanpassung

Wenn Ihr SVG keine expliziten width/height-Attribute enthält, fügen Sie ein viewBox hinzu, um das Seitenverhältnis zu steuern:

<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Inhalt -->
</svg>

Exportqualität

Der PNG-Export verwendet 2-fache Auflösung für gestochen scharfe Anzeige auf Retina-Bildschirmen. Eine einfarbige Hintergrundfarbe wird automatisch hinzugefügt (das SVG selbst kann einen transparenten Hintergrund haben).