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

SVG 以行內方式渲染——就像 Mermaid 圖表一樣——並附有互動控制項。

VMark 獨有功能

Typora 和 Obsidian 均不支援 ```svg 程式碼區塊。這是 VMark 的獨有功能，專為 AI 工作流程設計，適用於工具所生成、不符合 Mermaid 語法的 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

原始碼模式的圖表預覽預設為關閉。可透過 檢視 → 切換圖表預覽（Alt + Mod + P）或命令面板開啟。

SVG 驗證

VMark 在渲染前驗證 SVG 內容：

內容必須以 <svg 或 <?xml 開頭
XML 必須格式正確（無解析錯誤）
根元素必須為 <svg>

若驗證失敗，會顯示無效的 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 攻擊。

外部參照也會被移除：<use> 與 <image> 可以指向同一文件內的片段（href="#arrowhead"）或行內的 data:image/… 資料，但指向本機以外的 URL 會被捨棄。若不這麼做，只要開啟一份含有不受信任圖表的文件，就會去擷取該 URL——洩露你的 IP 位址以及你開啟檔案的時間點。Mermaid 等圖表工具只會參照片段，因此一般圖表不受影響。

SVG 自帶的樣式表（<style>）會被限制在該 SVG 內：每個選擇器都會被改寫，使其只能匹配來源 SVG 內部的元素，因此圖表無法改變編輯器或其他圖表的樣式。只保留樣式規則、@media 與 @keyframes（動畫名稱會依 SVG 改為唯一名稱）；@import、@font-face 與其他 at 規則、外部 url() 參照，以及 position: fixed / sticky 都會被捨棄。<form> 元素會被移除（其內容會保留）。

已渲染 SVG 內的連結永遠不會讓 VMark 本身跳轉。點擊網頁連結會在系統瀏覽器中開啟；相對路徑的檔案連結會在 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 匯出使用 2x 解析度，在 Retina 螢幕上清晰顯示。系統會自動加入純色背景（SVG 本身可能有透明背景）。

SVG 圖形 ​

嵌入 SVG 作為圖片 ​

SVG 程式碼區塊 ​

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

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

進入編輯模式 ​

平移與縮放 ​

匯出為 PNG ​

原始碼模式預覽 ​

SVG 驗證 ​

AI 工作流程 ​

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

技巧 ​

安全性 ​

尺寸設定 ​

匯出品質 ​