SVG 圖形

VMark 對 SVG（可縮放向量圖形）提供一流的支援。在文件中使用 SVG 有兩種方式，各適合不同的工作流程。

方式	適合場景	可編輯原始碼？
圖片嵌入（`![](file.svg)`）	磁碟上的靜態 SVG 檔案	否
程式碼區塊（```svg）	行內 SVG、AI 生成的圖形	是

嵌入 SVG 作為圖片

使用標準 Markdown 圖片語法嵌入 SVG 檔案：

markdown

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

這與 PNG 或 JPEG 圖片完全相同 — 可透過拖放、貼上或工具列插入。SVG 檔案被識別為圖片並行內渲染。

適合場景： 你有一個 .svg 檔案（來自 Figma、Illustrator、Inkscape 或設計工具），並希望在文件中顯示它。

限制： 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 程式碼區塊。這是 VMark 的獨有功能，專為 AI 工作流程設計，讓工具生成的 SVG 視覺化內容（圖表、插圖、圖示）得以行內渲染。

適合使用程式碼區塊的情境

AI 生成的圖形 — Claude、ChatGPT 和其他 AI 工具可以直接生成 SVG 圖表、示意圖和插圖。將 SVG 貼入程式碼區塊即可行內渲染。
行內 SVG 創作 — 直接在文件中編輯 SVG 原始碼並即時查看結果。
自包含文件 — SVG 存在於 Markdown 檔案內，無需外部檔案相依性。

在所見即所得模式中編輯

在富文字模式中，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>

若驗證失敗，會顯示 Invalid SVG 錯誤訊息，而非渲染圖形。雙擊錯誤訊息即可編輯並修復原始碼。

AI 工作流程

AI 程式設計助手可透過 MCP 工具直接將 SVG 生成至你的 VMark 文件。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 內容進行清理。Script 標籤和事件處理器屬性（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 匯出使用 2x 解析度，在 Retina 螢幕上清晰顯示。系統會自動加入純色背景（SVG 本身可能有透明背景）。

SVG 圖形 ​

嵌入 SVG 作為圖片 ​

SVG 程式碼區塊 ​

適合使用程式碼區塊的情境 ​

在所見即所得模式中編輯 ​

進入編輯模式 ​

平移與縮放 ​

匯出為 PNG ​

原始碼模式預覽 ​

SVG 驗證 ​

AI 工作流程 ​

比較：SVG 程式碼區塊 vs Mermaid ​

技巧 ​

安全性 ​

尺寸設定 ​

匯出品質 ​