图片导出（PNG / SVG）
把画布上的单个节点导出为 SVG 矢量图或 PNG 位图，适配嵌入、打印、社交媒体等多种下游场景。
VizChat 的画布节点支持导出为静态图片，首选格式是 SVG 矢量图——它保留完整的图形信息，可在任何尺寸下清晰渲染，并能在 Figma / Illustrator 中二次编辑。需要 PNG 位图时，可直接用浏览器打开 SVG 另存为 PNG，或用 ImageMagick / Inkscape 等工具转换。
SVG 导出（推荐）
底层实现位于 apps/vizchat-nextjs/src/lib/export/utils.ts。核心流程：
- 定位节点：通过
data-node-id="<id>"属性查找节点容器。如果节点处于展开模式，优先导出对话框内的大图（data-expanded="true"）。 - 提取 SVG：找到带
data-canvas-svg="true"标记的<svg>元素。 - 克隆 + 净化：克隆避免污染运行时 DOM，补齐
xmlns命名空间，移除class等引用外部 CSS 的属性。 - 设置导出尺寸：用
width.baseVal.value或clientWidth计算真实像素尺寸，设置viewBox。 - 智能裁剪：对使用屏幕坐标的坐标系内容（无
transform顶层g），应用clipPath避免溢出。 - 序列化 + 下载：
XMLSerializer+ 白色背景 + 触发浏览器下载。
文件名格式：{节点标题}-{yyyy-MM-ddTHH-mm-ss}.svg（本地时区）。
PNG 导出
目前 PNG 导出以"SVG 转换"为主要路径，没有走 html2canvas 方案——SVG 更轻、更清晰、更适合数据可视化节点。当你需要 PNG 时：
- 浏览器方案：下载 SVG → 直接用 Chrome 打开 → 右键"图像另存为"，选 PNG
- 命令行：
rsvg-convert input.svg -o output.png（librsvg）或inkscape input.svg --export-type=png - 在线工具：任意 SVG → PNG 在线转换器
触发方式
- 节点右上角菜单 → 导出 SVG
- 键盘快捷键（见 快捷键参考）
- 展开模式下导出 质量更高，因为渲染区域更大