SVG 图形

VMark 为 SVG（可缩放矢量图形）提供一流支持。在文档中使用 SVG 有两种方式，各自适合不同的工作流。

方式	最适合	可编辑源码？
图片嵌入（`![](file.svg)`）	磁盘上的静态 SVG 文件	否
代码块（```svg）	内联 SVG、AI 生成的图形	是

将 SVG 嵌入为图片

使用标准 Markdown 图片语法嵌入 SVG 文件：

markdown

![架构图](./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 通过系统保存对话框以 2 倍分辨率 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 代码块与 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 及其他 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 导出使用 2 倍分辨率，在 Retina 屏幕上显示清晰。系统会自动添加纯色背景（SVG 本身可能是透明背景）。

SVG 图形 ​

将 SVG 嵌入为图片 ​

SVG 代码块 ​

适用场景 ​

在所见即所得模式中编辑 ​

进入编辑模式 ​

平移与缩放 ​

导出为 PNG ​

源码模式预览 ​

SVG 验证 ​

AI 工作流 ​

对比：SVG 代码块与 Mermaid ​

使用技巧 ​

安全性 ​

尺寸设置 ​

导出质量 ​