SVG グラフィックス

VMark は SVG（スケーラブルベクターグラフィックス）を最高クラスでサポートします。ドキュメントで SVG を使用するには 2 つの方法があり、それぞれ異なるワークフローに適しています。

方法	最適な用途	ソース編集?
画像の埋め込み（`![](file.svg)`）	ディスク上の静的 SVG ファイル	いいえ
コードブロック（```svg）	インライン SVG、AI 生成グラフィックス	はい

SVG を画像として埋め込む

標準的な Markdown 画像構文を使って SVG ファイルを埋め込みます:

markdown

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

これは PNG や JPEG 画像とまったく同じように機能します — ドラッグ&ドロップ、貼り付け、またはツールバーから挿入します。SVG ファイルは画像として認識され、インラインでレンダリングされます。

この方法を使うとき: Figma、Illustrator、Inkscape、またはデザインツールからの.svgファイルがあり、ドキュメントに表示したい場合。

制限事項: SVG は静的画像としてレンダリングされます。SVG ソースをインラインで編集することはできず、パン+ズームやエクスポートコントロールも表示されません。

SVG コードブロック

svg言語識別子でフェンスされたコードブロックに SVG マークアップを包みます:

markdown

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

SVG は Mermaid 図と同様にインラインでレンダリングされ、インタラクティブなコントロールが付きます。

VMark 独自の機能

Typora も Obsidian も```svgコードブロックをサポートしていません。これは AI ワークフロー向けに設計された VMark 独自の機能です。AI ツールが Mermaid の文法に合わない SVG のビジュアライゼーション（チャート、イラスト、アイコン）を生成する場合に役立ちます。

コードブロックを使うとき

AI 生成グラフィックス — Claude、ChatGPT、その他の AI ツールは SVG のチャート、図、イラストを直接生成できます。SVG をコードブロックに貼り付けてインラインでレンダリングします。
インライン SVG オーサリング — ドキュメントで SVG ソースを直接編集し、ライブで結果を確認します。
自己完結型ドキュメント — SVG は Markdown ファイルの中に存在し、外部ファイルへの依存がありません。

WYSIWYG モードでの編集

リッチテキストモードでは、SVG コードブロックが自動的にインラインでレンダリングされます。

編集モードへの入り方

レンダリングされた SVG をダブルクリックしてソースエディタを開きます。編集ヘッダーが表示されます:

ボタン	アクション
コピー	SVG ソースをクリップボードにコピー
キャンセル（X）	変更を元に戻して終了（`Esc`でも可）
保存（チェックマーク）	変更を適用して終了

エディタの下の ライブプレビュー は入力に合わせて更新されるため、リアルタイムで変更を確認できます。

パンとズーム

レンダリングされた SVG の上にホバーするとインタラクティブなコントロールが表示されます:

アクション	方法
ズーム	`Cmd`（macOS）または`Ctrl`（Windows/Linux）を押しながらスクロール
パン	SVG をクリックしてドラッグ
リセット	リセットボタンをクリック（右上角）

これらは Mermaid 図に使われるパン+ズームコントロールと同じです。

PNG としてエクスポート

レンダリングされた SVG の上にホバーすると エクスポート ボタンが表示されます（右上、リセットボタンの隣）。クリックして背景テーマを選択します:

テーマ	背景
ライト	白（`#ffffff`）
ダーク	暗い（`#1e1e1e`）

SVG はシステムの保存ダイアログを通じて 2x 解像度の PNG としてエクスポートされます。

ソースモードのプレビュー

ソースモードでは、カーソルが```svgコードブロック内にあると、フローティングプレビューパネルが表示されます — Mermaid 図に使われるのと同じパネルです。

機能	説明
ライブプレビュー	入力後すぐに更新（デバウンスなし — SVG レンダリングは即時）
ドラッグして移動	ヘッダーをドラッグして位置を変更
リサイズ	任意のエッジまたはコーナーをドラッグ
ズーム	`−`と`+`ボタン、または`Cmd/Ctrl` + スクロール（10%〜300%）

INFO

ソースモードの図プレビューは有効にする必要があります。ステータスバーの ダイアグラムプレビュー ボタンで切り替えます。

SVG の検証

VMark はレンダリング前に SVG コンテンツを検証します:

コンテンツは<svgまたは<?xmlで始まる必要があります
XML は整形式である必要があります（パースエラーなし）
ルート要素は<svg>である必要があります

検証に失敗すると、レンダリングされたグラフィックの代わりに 無効な SVG エラーメッセージが表示されます。エラーをダブルクリックしてソースを編集し修正します。

AI ワークフロー

AI コーディングアシスタントは MCP ツールを通じて VMark ドキュメントに直接 SVG を生成できます。AI はlanguage: "svg"と SVG コンテンツを含むコードブロックを送信し、自動的にインラインでレンダリングされます。

プロンプト例:

四半期収益のバーチャートを作成してください: Q1 $2.1M、Q2 $2.8M、Q3 $3.2M、Q4 $3.9M

AI はドキュメントにインラインでレンダリングされる SVG バーチャートを生成し、パン+ズームと PNG エクスポートがすぐに利用できます。

比較: SVG コードブロック vs Mermaid

機能	```svg	```mermaid
入力	生 SVG マークアップ	Mermaid DSL
レンダリング	即時（同期）	非同期（200ms デバウンス）
パン + ズーム	あり	あり
PNG エクスポート	あり	あり
ライブプレビュー	あり	あり
テーマ適応	なし（SVG 独自の色を使用）	あり（すべてのテーマに適応）
最適な用途	カスタムグラフィックス、AI 生成ビジュアル	フローチャート、シーケンス図、構造図

ヒント

セキュリティ

VMark はレンダリング前に SVG コンテンツをサニタイズします。スクリプトタグとイベントハンドラー属性（onclick、onerrorなど）は除去されます。これにより信頼できないソースから SVG を貼り付けた場合の XSS を防ぎます。

サイズ調整

SVG に明示的なwidth/height属性が含まれていない場合、アスペクト比を制御するためにviewBoxを追加します:

xml

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

エクスポート品質

PNG エクスポートは Retina スクリーンでの鮮明な表示のために 2x 解像度を使用します。背景色が自動的に追加されます（SVG 自体は透明な背景を持っている場合があります）。

SVG グラフィックス ​

SVG を画像として埋め込む ​

SVG コードブロック ​

コードブロックを使うとき ​

WYSIWYG モードでの編集 ​

編集モードへの入り方 ​

パンとズーム ​

PNG としてエクスポート ​

ソースモードのプレビュー ​

SVG の検証 ​

AI ワークフロー ​

比較: SVG コードブロック vs Mermaid ​

ヒント ​

セキュリティ ​

サイズ調整 ​

エクスポート品質 ​