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

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

ソースモードの図プレビューはデフォルトでオフです。表示 → ダイアグラムプレビューの切り替え（Alt + Mod + P）またはコマンドパレットでオンにします。

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 を防ぎます。

外部参照も削除されます。<use> と <image> は同じドキュメント内のフラグメント（href="#arrowhead"）やインラインの data:image/… ペイロードを指すことはできますが、マシンの外を指す URL は取り除かれます。これがなければ、信頼できない図を含むドキュメントを開くだけでその URL が取得され——あなたの IP アドレスとファイルを開いた時刻が漏れてしまいます。Mermaid などの図ツールはフラグメントしか参照しないため、通常の図には影響しません。

SVG 独自のスタイルシート（<style>）は、その SVG の中に閉じ込められます。すべてのセレクタは、元の SVG の内側にしかマッチしないよう書き換えられるため、図がエディタや他の図のスタイルを変えることはできません。保持されるのはスタイルルール、@media、@keyframes だけで（アニメーション名は SVG ごとに一意にされます）、@import、@font-face などのアットルール、外部の url() 参照、position: fixed / sticky は取り除かれます。<form> 要素は削除されます（中身は保持されます）。

レンダリングされた SVG 内のリンクが VMark 自体を遷移させることはありません。Web リンクをクリックするとシステムのブラウザで開き、相対ファイルリンクはそのファイルを VMark のタブで開きます。javascript:、file:、data: のリンクは決して開かれません。

サイズ調整

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 ​

ヒント ​

セキュリティ ​

サイズ調整 ​

エクスポート品質 ​