用 Fable 5.2 制作可编辑 SVG 插画与动画：两次 API 实测

Fable 5.2 可以输出 SVG 代码，由浏览器渲染成可编辑的矢量图。 在本次两次调用中，模型先生成分组帆船插画，再修改主帆颜色并加入轻微运动，同时保留矢量几何形状。你可以下载两份文件，并按下面的请求复现。

这是用代码绘图，不是原生图片生成。Anthropic 的 Fable 5.2 规格说明列出的输入是文本和图片，输出是文本。SVG 本质上是描述形状的文本，浏览器或矢量编辑器再将指令显示成图像。它既解释了为什么结果可以编辑，也说明了限制：代码必须有效，而请求成功不代表作品一定好看。

我们于 2026 年 11 月 11 日测试了 Ofox 的 Anthropic 兼容端点，模型为 anthropic/claude-fable-5.2，effort 设为 low，输出上限为 8,192 token。本例是一幅简单原创插画，不是跨模型基准测试，也没有测试复杂 3D 场景。本文由 Ofox 发布。

下载真实输出文件

Fable SVG 示例包包含首版 SVG、修改后的动画 SVG、完整请求体、返回文本、用量证据及结构对比。包内不含 API Key。请分别保留原始版和修改版，方便检查具体变化。

截图来自本地英文证据查看页，展示真实 API 输出；它不是 Ofox Chat 界面。文章封面是另外制作的概念插画。

小帆的结果值得留意。模型把“修改帆的颜色”理解成修改较大的橙色主帆，而非所有帆形区域。如果你希望两面帆都改色，应明确指出两个部件。这说明即使修改后看起来合理，也要对照实际要求检查。

先把作品定义成可编辑部件

先确定用途：网页中的小插画、后续要改色的示意图，还是简单动画。提出有意义的分组 ID、画布尺寸和必要限制。如果只要求“一幅惊艳插画”，就很难判断结果是否真正适用。

第一次提示词刻意限制了范围。以下保留实测时发送的英文原文，便于准确复现：

Return ONLY a complete standalone SVG, no markdown. Create an original
flat vector illustration of a small orange sailboat riding three blue
waves under a pale circular sun. Canvas 800x500, viewBox 0 0 800 500.
Off-white background, charcoal outlines, orange sail, pale blue water.
Organize editable groups with IDs boat, sail, waves, sun.
Use vector paths and shapes, no raster images, no external URLs,
no scripts, no foreignObject, no animation in this first version.
Include title and desc. Keep the geometry clean and readable at 320px
width. This is a small reusable illustration, not a complex artwork;
keep SVG under 8000 characters.

这些限制对应具体的验收项。分组让后续动画可以准确指定对象；viewBox 使缩放行为可预期；排除外部资源，让文件更容易跨机器使用。字符上限用于避免请求过度复杂的作品，它只是提示词要求，不是服务端强制执行的 SVG 限制。

本例有意保持简单，不能据此证明 Fable 能复原照片、精确保留商标，或自动产出可直接投入生产的动态图形。如果要转换已有位图设计，请使用独立的 PNG 转可编辑 SVG 流程，那类任务首先要检验与输入的一致性。

发起第一次 API 请求

ZIP 中的 first-request.json 是实际测试的完整请求。按常用的密钥管理方式，将自己的 Key 设置到 shell 环境中。不要把 Key 写入 JSON、浏览器脚本、截图或提交到仓库的文件。

curl --fail-with-body https://api.ofox.ai/anthropic/v1/messages \
  -H "x-api-key: $OFOX_API_KEY" \
  -H "anthropic-version: 2023-06-01" \
  -H "content-type: application/json" \
  --data-binary @first-request.json \
  -o first-response.json

相关请求字段如下：

{
  "model": "anthropic/claude-fable-5.2",
  "max_tokens": 8192,
  "output_config": {"effort": "low"},
  "messages": [{"role": "user", "content": "YOUR COMPLETE SVG BRIEF"}]
}

上面的短 JSON 用于说明配置，下载包中的请求才包含完整提示词。Ofox 模型 ID 与 Claude 官方直连 API 使用的 claude-fable-5-2 不同，不要混用不同提供方的模型名称与 base URL。接入步骤可参考 Fable 5.2 API 指南和 Ofox Messages API 文档。

按规格说明，Fable 的自适应思考始终开启。low effort 是推理投入程度设置，不代表关闭思考。本例没有添加 temperature、top_p 或强制工具选择。迁移请求后若返回 400，先查看 Fable 5.2 参数与工具选择报错排查，再决定是否需要修改绘图提示词。

渲染前先提取并检查 SVG

API 返回的是 JSON 容器。应收集类型为 text 的内容块，再保存其中的 SVG 标记，而不是把整个响应另存为 .svg。确认响应正常结束，并包含闭合的 </svg> 标签。达到输出上限而中断的响应可能并不完整，即使某些宽容的查看器还能显示部分画面。

import json
import re
from pathlib import Path

response = json.loads(Path("first-response.json").read_text())
if response.get("stop_reason") != "end_turn":
    raise RuntimeError("Inspect the response before accepting the SVG")
text = "\n".join(block.get("text", "")
                 for block in response.get("content", [])
                 if block.get("type") == "text")
match = re.search(r"<svg\b[\s\S]*?</svg>", text)
if not match:
    raise RuntimeError("No complete SVG found")
Path("first.svg").write_text(match.group())

提取不等于净化。将生成代码用于网站前，检查脚本、事件处理器、外部 URL、foreignObject 和内嵌图片。本次小样例已检查实际文件，未发现这些活动内容或外部资源。但不能把简单字符串检查当成任意 SVG 的安全保证。

在浏览器中打开可信输出；若最终交付给矢量编辑器，也要在该编辑器中检查。确认剪影、叠放顺序和镂空区域。本例波浪覆盖船体底部，符合船浮在水上的预期。XML 格式正确，仍可能出现层级错误或主体被裁切。

提出范围明确的修改

第二次请求把最初的用户提示词和返回的 SVG 放入对话上下文，再追加以下指令。这里同样保留真实请求的英文原文：

Return the complete revised SVG only. Change the sail from orange to
purple #7953A9. Preserve all geometry, group IDs and other colors.
Add gentle 6px vertical bobbing only to the boat group using internal
CSS keyframes, a 3-second loop. Include a prefers-reduced-motion: reduce
rule that disables animation. Keep the sun and waves static.
No scripts, external URLs or raster images.

使用 revision-request.json 请求同一端点，即可复现第二次调用。本例回放的是可见 SVG 文本，不是工具调用历史，也没有演示保留隐藏思考。如果要在模型版本间迁移工具历史，请参考 Agent 模型切换指南，不要直接照搬这个最小对话示例。

结构对比发现，现有形状和组中只有一处填色改变，路径坐标、ID 和其他形状属性均保留。模型同时更新了辅助访问用的标题与描述，并增加了内部样式块。因此，准确说法是几何结构保持不变，不能声称文件其他字节都没有变化。

验证动画，并保留静态版本

修改后的 SVG 为 #boat 设置 CSS 关键帧，在三秒循环的中点向上移动六个单位。浏览器中两次采样显示船的 transform 发生了变化，太阳和波浪没有动画。CSS 包含减少动态效果的规则；本次检查了规则，但没有切换操作系统的相应偏好来验证。

直接打开 revision.svg 可以观看动画。截图只显示一帧，导出 PNG 也只能得到静态图。有些编辑器或文档软件会忽略 SVG CSS 动画，即使浏览器可以播放。保留 first.svg 作为静态源文件；交付需要时，另外生成修改后作品的明确静态版本。不要承诺把动画 SVG 插入 PowerPoint、邮件或设计工具后仍能保留动画。

如果在同一份 HTML 中内联多个 SVG，重复 ID 和全局 CSS 选择器可能相互影响。可为 ID 添加唯一前缀，或将每个 SVG 隔离为独立图片资源。我们的证据查看页分别显示各文件，避免修改版船只的动画影响首版。

要交付 GIF，需要另外采集或渲染一系列帧，再编码成 GIF。SVG 动画与导出的 GIF 是不同文件，取舍也不同。GIF 工作流教程介绍了时序与导出检查；不能只把 SVG 扩展名改成 GIF。

两次调用的费用，以及它们能证明什么

估算采用 11 月 11 日 Ofox catalog 中每输入 token $0.000008、每输出 token $0.00004 的字段值。响应中的缓存计数为零。计算方式是输入 token × 输入单价，加上输出 token × 输出单价；这些数字不是已核实的账户最终扣费。请求耗时包含观察到的往返过程，不是普遍速度基准。更复杂的作品、更长的对话和重试都会影响时间与费用。

这些证据只支持一个有限结论：在本次要求下，这条路由产出了有效、带分组的矢量插画，并完成受控的动画修改。它们不能证明普遍的艺术能力优势或成功率。真正可用的交付是可检查的文件和可复现的方法。

如果更习惯对话操作，可以在 Ofox Chat 中开始，写明 SVG 输出、可编辑分组和具体修改要求。本文测试走的是 API；我们没有验证某个 Chat 模式是否会选择 Fable 5.2，或是否暴露这些 API 参数。如果需要复现指定模型的结果，请使用 API 流程。