SVG 实时预览技术：所见即所得的演示生成体验

核心结论

OmyPPT 选择 SVG 作为幻灯片的中间表示格式，配合浏览器端的实时渲染引擎，实现了"生成即可见"的预览体验。用户在 worker 逐页生成 SVG 的过程中，就能在浏览器中看到每一页的实际渲染效果，并通过可视化编辑器进行标注和修改。这种架构比传统的"生成完毕才能预览"模式提供了更早的反馈环和更高的控制力。

技术背景：为什么需要实时预览

AI 生成 PPT 的一个核心矛盾是：用户不知道结果好不好，直到结果已经完全生成。 这带来了几个问题。

信任问题：付费前看不到效果，用户会犹豫——钱花了，万一不满意怎么办？传统工具要么不给预览，要么只给低分辨率的缩略图，无法判断实际效果。

修改成本高：如果生成完毕后发现第 3 页有问题，重新生成整个 PPT 需要等待完整流程。即使只改一页，也得重来。

反馈滞后：从"描述需求"到"看到结果"之间有一个漫长的黑盒。用户无法在过程中纠正 AI 的理解偏差。

实时预览的目标是把这些问题的代价降到最低：尽可能早地让用户看到结果，让修改在过程中进行，而不是事后补救。

OmyPPT 的实现方式

为什么是 SVG

OmyPPT 选择 SVG 作为幻灯片的中间格式，基于三个技术考量。

矢量精度：PPT 本质上是矢量内容——文本、形状、线条、图标都是矢量的。SVG 同样是矢量格式，能精确表达这些元素。PNG/JPG 等光栅格式在放大时会模糊，而 SVG 无论如何缩放都保持清晰。这对于 PPT 预览至关重要——用户需要看清每一个文字和形状的细节。

浏览器原生渲染：所有现代浏览器都原生支持 SVG 渲染，无需任何插件或转换。SVG 文件可以直接嵌入 HTML（inline SVG），CSS 可以控制其样式，JavaScript 可以操作其 DOM。这意味着 OmyPPT 不需要自建渲染引擎——浏览器就是最好的渲染引擎。

文本可编辑性：SVG 中的 <text> 元素包含真实的文本内容，不是渲染后的像素。这意味着浏览器可以选中文本、搜索文本、甚至编辑文本（配合 contenteditable 属性）。对于 PPT 预览场景，这意味着用户可以直观地看到每个文本框的实际内容。

格式接近性：SVG 和 DrawingML（PPTX 内部格式）在概念上高度相似——都有形状（rect/circle/path vs AutoShape/Freeform）、文本（text vs TextFrame）、变换（transform vs xfrm）、填充和描边。这种接近性使得 SVG → DrawingML 的转换能够保持高保真度。

SVG 生成管线

Executor 在生成每一页 SVG 时，遵循以下流程：

布局计算：根据 agent 提供的设计参数（画布尺寸、边距、内容区域），计算每个元素的位置和尺寸。画布支持 16:9（1920x1080）和 4:3（1440x1080）两种比例。

元素生成：根据页面类型（封面、内容、数据、结尾等）和内容数据，生成对应的 SVG 元素：

• 文本：<text> 元素，带字体、大小、颜色、对齐属性
• 形状：<rect>、<circle>、<path> 等基本形状
• 图片：<image> 元素，引用项目目录中的图片文件
• 图标：内联 SVG path，来自 OmyPPT 的 1000+ 图标库
• 图表：由多个 SVG 元素组合而成的数据可视化图形

坐标标准化：所有坐标和尺寸使用绝对值（基于画布尺寸），确保不同缩放比例下的一致性。

输出：每页 SVG 保存为独立的文件（slide_01.svg、slide_02.svg 等），便于逐页加载和更新。

浏览器端渲染引擎

OmyPPT 的实时预览不是一个简单的图片查看器，而是一个功能完整的 SVG 编辑器。

页面导航：左侧缩略图导航栏，显示所有页面的缩略图。点击切换到对应页面。当前正在生成的页面会有加载指示器。

缩放和平移：支持鼠标滚轮缩放、拖拽平移。预览区会自适应窗口大小，保持画布比例。

元素选择：点击 SVG 中的任意元素可以选中它。选中的元素会显示选择框和变换手柄。这一功能依赖于 SVG DOM 的事件系统——每个元素都可以绑定 click 事件。

标注功能：用户可以在预览界面上直接标注——在某个元素旁边添加文字批注，指出需要修改的地方。这些标注会被记录下来，用于指导重新生成。

实时更新：当worker生成新的页面或更新已有页面时，浏览器端通过轮询或 WebSocket 接收更新通知，自动重新加载对应的 SVG 文件。用户不需要手动刷新页面。

SVG 质量校验

除了用户主观判断，OmyPPT 还内置了自动化的 SVG 质量校验工具：

• 文本溢出检测：检查文本内容是否超出其容器的边界
• 元素重叠检测：检查非预期的元素重叠（预期的层级覆盖除外）
• 可读性检查：检查文本颜色和背景色的对比度是否满足 WCAG 标准
• 尺寸一致性：检查同类元素的尺寸是否一致（例如所有页面的标题字号是否统一）

优势分析

vs 等全部生成再预览

传统模式下，用户在生成开始后只能看到一个进度条。如果 30 页的 PPT 在第 25 页出现方向性错误，前面 24 页的生成时间全部浪费。

OmyPPT 的逐页预览让用户在第 1 页生成完毕时就能判断方向是否正确。如果不对，可以立即调整设计参数，重新生成。反馈周期从"整个生成过程"缩短到"一页的生成时间"。

vs 在线编辑器（Gamma、Pitch 等）

在线编辑器（如 Gamma）的预览就是编辑本身——因为它们生成的是在线页面，所见即所得是天然成立的。但这些工具的代价是输出格式被锁定在自家平台上。导出为 PPTX 后，效果会打折。

OmyPPT 的预览是"最终效果的忠实呈现"——因为 SVG 和 PPTX 之间有精确的映射关系。预览中看到的效果，导出后基本一致。

vs 截图式预览

一些工具提供"预览"，实际上是对生成结果的截图。截图的问题：分辨率固定，放大后模糊；文本不可选择和搜索；无法进行标注和交互操作。

SVG 预览在任何缩放比例下都保持清晰，文本可以选择和搜索，元素可以点击和标注。

应用场景

团队审核：生成过程中，将预览链接分享给同事，让他们实时查看并提出修改意见。不需要等全部完成，第 5 页开始就可以收到反馈。

客户沟通：为客户生成 PPT 时，让客户在预览阶段确认方向。避免生成完毕后大幅修改的尴尬。

教学课件：教师上传课件材料后，在预览界面逐页检查内容准确性和排版效果，确保课件质量后再下载。

常见问题

预览效果和最终 PPTX 完全一样吗？

95% 以上一致。极少数差异来自 SVG 和 PowerPoint 渲染引擎的差异——例如某些字体在浏览器和 PowerPoint 中的渲染可能有细微不同（字距、行距的微调）。OmyPPT 在设计时就考虑了这些差异，尽量使用两个引擎都支持良好的属性。

预览时可以编辑文字内容吗？

可以。OmyPPT 的 SVG 编辑器支持文本编辑。你可以双击一个文本框，直接修改其中的文字。修改后的内容会在最终导出时反映到 PPTX 中。

大量页面（50页+）的预览性能如何？

OmyPPT 使用懒加载策略——缩略图导航栏只渲染可视区域内的缩略图，主预览区只加载当前查看的页面 SVG。即使有 100 页，也不会出现性能问题。

预览链接有有效期吗？

预览链接与项目关联，在项目存续期间都有效。删除项目后，预览链接失效。

---

想体验真正的所见即所得 PPT 生成？试试 OmyPPT，上传文档后实时查看每一页的生成效果。