Fable 5.2 で編集可能な SVG イラストとアニメーションを作る

Fable 5.2 は、ブラウザーで編集可能なベクター画像として表示できる SVG コードを生成できます。 今回の 2 回の呼び出しでは、グループ分けされた帆船のイラストを作り、次にベクターの形状を保ったまま主帆の色と穏やかな動きを変更しました。両方のファイルをダウンロードし、以下のリクエストで手順を再現できます。

これはコードによる描画であり、ネイティブな画像生成ではありません。Anthropic の Fable 5.2 仕様では、入力はテキストと画像、出力はテキストです。SVG は形状を記述したテキストで、ブラウザーやベクターエディターが画像として表示します。この仕組みが編集しやすさにつながる一方、有効なコードが必要であり、応答に成功しただけで美しい作品になるとは限りません。

2026 年 11 月 11 日、Ofox の Anthropic 互換エンドポイントで anthropic/claude-fable-5.2 を使用し、effort を low、出力上限を 8,192 トークンに設定して検証しました。小さなオリジナルイラストの例であり、他モデルとのベンチマークや複雑な 3D シーンの試験ではありません。この記事の発行元は Ofox です。

実際の出力をダウンロードする

Fable SVG サンプル一式には、最初の SVG、修正後のアニメーション SVG、実際のリクエスト本文、返されたテキストと使用量の記録、構造の比較を含めています。API キーは含みません。変更点を確認できるよう、元ファイルと修正版は別々に保管してください。

実際の 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 の上限ではありません。

作品は意図的に単純にしています。写真の再現、商標の厳密な保持、そのまま本番で使えるモーショングラフィックスの自動生成を実証したものではありません。既存のラスター画像を変換する場合は、入力への忠実度を重視する別記事の PNG を編集可能な SVG にする手順をご覧ください。

最初の API リクエストを送る

実際に検証したリクエストは ZIP 内の first-request.json にあります。通常のシークレット管理手順で、自分のキーをシェル環境に設定してください。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 を抽出して検査する

応答は 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 として正しくても、重なり順が不自然だったり、被写体が切れたりする場合があります。

範囲を限定して修正を依頼する

2 回目のリクエストには、最初のユーザープロンプトと返された 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 を使うと、2 回目の呼び出しを再現できます。この例で引き継いだのは可視の SVG テキストであり、ツール呼び出し履歴や、非公開の思考を保持する実例ではありません。モデルのバージョン間でツール履歴を移す場合は、この最小限の会話をそのまま流用せず、Agent のモデル切り替えガイドを参照してください。

構造比較では、既存の図形とグループに対する塗りの変更が 1 か所だけ見つかりました。パス座標、ID、その他の図形属性は保持されていました。一方、モデルはアクセシビリティ用のタイトルと説明を更新し、内部のスタイルブロックを追加しています。「それ以外は 1 バイトも変わっていない」ではなく、こう説明する方が正確です。

動きを確認し、静止画版も残す

修正版は #boat に CSS キーフレームを適用し、3 秒のループの中間で上に 6 単位移動させます。ブラウザーで 2 回サンプリングすると船の transform が変わり、太陽と波にはアニメーションがありませんでした。CSS には動きを減らす設定に対応する規則もあります。この規則は確認しましたが、今回は OS の設定を切り替えて動作確認していません。

動きを見るには revision.svg を直接開きます。スクリーンショットは 1 フレームだけで、PNG 書き出しも静止画です。ブラウザーでは動いても、エディターや文書アプリが SVG の CSS アニメーションを無視する場合があります。first.svg を静止画の元データとして残すか、納品形式に応じて修正版から明示的な静止画版を作成します。PowerPoint、メール、デザインツールへ挿入しても動きが維持されるとは約束しないでください。

同じ HTML 文書に複数の SVG をインラインで置くと、重複 ID やグローバルな CSS セレクターが干渉する場合があります。ID に固有の接頭辞を付けるか、各 SVG を画像リソースとして分離します。今回のビューアでは各ファイルを分けて表示し、修正版のアニメーションが元の船に影響しないようにしています。

GIF を納品するなら、連続したフレームを取得またはレンダリングして、別途エンコードします。SVG アニメーションと GIF は異なるファイルで、利点も制約も異なります。GIF 作成ガイドでは時間設定と書き出し確認を説明しています。SVG の拡張子を変更するだけでは変換できません。

2 回の呼び出しの費用と、確認できた範囲

見積もりには、11 月 11 日の Ofox catalog の入力 1 トークン当たり $0.000008、出力 1 トークン当たり $0.00004 という値を使いました。応答のキャッシュカウンターはゼロでした。計算式は「入力トークン数 × 入力単価 ＋ 出力トークン数 × 出力単価」で、アカウントからの最終引き落としを確認した金額ではありません。所要時間には観測した往復時間を含み、一般的な速度ベンチマークではありません。細かい作品、長い会話、再試行では時間も費用も変わります。

この証拠が示す範囲は限定的です。今回の条件で、このルートは有効なグループ付きベクターイラストを生成し、範囲を限定したアニメーション修正を行えました。芸術表現全般の優位性や成功率は示していません。得られる価値は、検査できる実ファイルと再現可能な手順です。

対話形式がよければ、Ofox Chat で始める際に、SVG 出力、編集可能なグループ、具体的な修正内容を指定してください。この記事の呼び出しは API を使用しており、特定の Chat モードが Fable 5.2 を選ぶか、これらの API パラメーターを設定できるかは検証していません。モデルを指定して結果を再現したい場合は、API の手順を使ってください。