SVG Graphics

VMark provides first-class support for SVG — Scalable Vector Graphics. There are two ways to use SVG in your documents, each suited to a different workflow.

Method	Best For	Editable Source?
Image embed ()	Static SVG files on disk	No
Code block (```svg)	Inline SVG, AI-generated graphics	Yes

Embedding SVG as an Image

Use standard Markdown image syntax to embed an SVG file:

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

This works exactly like PNG or JPEG images — drag and drop, paste, or insert via the toolbar. SVG files are recognized as images and rendered inline.

When to use this: You have an .svg file (from Figma, Illustrator, Inkscape, or a design tool) and want to display it in your document.

Limitations: The SVG renders as a static image. You cannot edit the SVG source inline, and no pan+zoom or export controls appear.

SVG Code Blocks

Wrap raw SVG markup in a fenced code block with the svg language identifier:

```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

The SVG renders inline — just like Mermaid diagrams — with interactive controls.

Unique to VMark

Neither Typora nor Obsidian support ```svg code blocks. This is a VMark-exclusive feature, designed for AI workflows where tools generate SVG visualizations (charts, illustrations, icons) that don't fit Mermaid's grammar.

When to Use Code Blocks

• AI-generated graphics — Claude, ChatGPT, and other AI tools can generate SVG charts, diagrams, and illustrations directly. Paste the SVG into a code block to render it inline.
• Inline SVG authoring — Edit SVG source directly in your document and see live results.
• Self-contained documents — The SVG lives inside the Markdown file, with no external file dependency.

Editing in WYSIWYG Mode

In Rich Text mode, SVG code blocks render inline automatically.

Entering Edit Mode

Double-click a rendered SVG to open the source editor. An edit header appears with:

Button	Action
Copy	Copy SVG source to clipboard
Cancel (X)	Revert changes and exit (also Esc)
Save (checkmark)	Apply changes and exit

A live preview below the editor updates as you type, so you can see your changes in real time.

Pan and Zoom

Hover over a rendered SVG to reveal interactive controls:

Action	How
Zoom	Hold Cmd (macOS) or Ctrl (Windows/Linux) and scroll
Pan	Click and drag the SVG
Reset	Click the reset button (top-right corner)

These are the same pan+zoom controls used for Mermaid diagrams.

Export as PNG

Hover over a rendered SVG to reveal the export button (top-right, next to the reset button). Click it to choose a background theme:

Theme	Background
Light	White (#ffffff)
Dark	Dark (#1e1e1e)

The SVG is exported as a 2x resolution PNG via the system save dialog.

Source Mode Preview

In Source mode, when your cursor is inside a ```svg code block, a floating preview panel appears — the same panel used for Mermaid diagrams.

Feature	Description
Live preview	Updates immediately as you type (no debounce — SVG rendering is instant)
Drag to move	Drag the header to reposition
Resize	Drag any edge or corner
Zoom	− and + buttons, or Cmd/Ctrl + scroll (10% to 300%)

INFO

The Source mode diagram preview is off by default. Turn it on with View → Toggle Diagram Preview (Alt + Mod + P) or the command palette.

SVG Validation

VMark validates SVG content before rendering:

• The content must start with <svg or <?xml
• The XML must be well-formed (no parse errors)
• The root element must be <svg>

If validation fails, an Invalid SVG error message is shown instead of the rendered graphic. Double-click the error to edit and fix the source.

AI Workflow

AI coding assistants can generate SVG directly into your VMark documents via MCP tools. The AI sends a code block with language: "svg" and the SVG content, which renders inline automatically.

Example prompt:

Create a bar chart showing quarterly revenue: Q1 $2.1M, Q2 $2.8M, Q3 $3.2M, Q4 $3.9M

The AI generates an SVG bar chart that renders inline in your document, with pan+zoom and PNG export available immediately.

Comparison: SVG Code Block vs Mermaid

Feature	```svg	```mermaid
Input	Raw SVG markup	Mermaid DSL
Rendering	Instant (synchronous)	Async (200ms debounce)
Pan + Zoom	Yes	Yes
PNG Export	Yes	Yes
Live preview	Yes	Yes
Theme adaptation	No (uses SVG's own colors)	Yes (adapts to all themes)
Best for	Custom graphics, AI-generated visuals	Flowcharts, sequence diagrams, structured diagrams

Tips

Security

VMark sanitizes SVG content before rendering. Script tags and event handler attributes (onclick, onerror, etc.) are stripped. This protects against XSS when pasting SVG from untrusted sources.

External references are also removed: <use> and <image> may point at a same-document fragment (href="#arrowhead") or an inline data:image/… payload, but a URL pointing off the machine is dropped. Without this, simply opening a document containing an untrusted diagram would fetch that URL — revealing your IP address and the moment you opened the file. Diagram tools such as Mermaid only ever reference fragments, so normal diagrams are unaffected.

An SVG's own stylesheet (<style>) is confined to that SVG: every selector is rewritten so it can match only inside the SVG it came from, so a diagram cannot restyle the editor or another diagram. Only style rules, @media and @keyframes are kept (animation names are made unique per SVG); @import, @font-face and other at-rules, external url() references and position: fixed / sticky are dropped. <form> elements are removed (their content is kept).

Links inside a rendered SVG never navigate VMark itself. Clicking a web link opens it in your system browser; a relative file link opens the file in a VMark tab; javascript:, file: and data: links are never opened.

Sizing

If your SVG doesn't include explicit width/height attributes, add a viewBox to control its aspect ratio:

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

Export Quality

PNG export uses 2x resolution for crisp display on Retina screens. A solid background color is added automatically (the SVG itself may have a transparent background).