Mit Fable 5.2 bearbeitbare SVG-Illustrationen und Animationen erstellen

Fable 5.2 kann SVG-Code erzeugen, den ein Browser als bearbeitbare Vektorgrafik darstellt. In unserem Beispiel mit zwei API-Aufrufen erstellte das Modell eine gruppierte Segelbootillustration. Anschließend änderte es die Farbe des Hauptsegels und ergänzte eine sanfte Bewegung, ohne die Vektorgeometrie zu verändern. Beide Dateien können Sie herunterladen und die Anfragen unten nachvollziehen.

Dabei handelt es sich um grafische Gestaltung per Code, nicht um native Bildgenerierung. Anthropic nennt in der Spezifikation von Fable 5.2 Text und Bilder als Eingaben und Text als Ausgabe. SVG ist Text, der Formen beschreibt; Browser oder Vektoreditoren machen daraus ein Bild. Das erklärt sowohl die Bearbeitbarkeit als auch die Grenzen: Der Code muss gültig sein, und eine erfolgreiche Antwort garantiert noch keine ansprechende Grafik.

Wir testeten den Anthropic-kompatiblen Endpunkt von Ofox am 11. November 2026 mit anthropic/claude-fable-5.2, der Effort-Einstellung low und einer Ausgabegrenze von 8.192 Tokens. Es handelt sich um eine kleine, neu erstellte Illustration, nicht um einen Modellvergleich oder einen Test komplexer 3D-Szenen. Herausgeber dieser Anleitung ist Ofox.

Die tatsächlichen Ausgaben herunterladen

Das Fable-SVG-Beispielpaket enthält die erste SVG-Datei, die überarbeitete animierte Fassung, die exakten Anfrageinhalte, den zurückgegebenen Text und die Nutzungsnachweise sowie einen Strukturvergleich. Es enthält keinen API-Schlüssel. Bewahren Sie Original und Überarbeitung getrennt auf, damit Sie die Änderungen prüfen können.

Browser-Screenshot der echten API-Ausgaben in unserem englischen lokalen Prüfviewer. Dies ist nicht die Oberfläche von Ofox Chat. Das Artikelcover ist eine separate konzeptionelle Illustration.

Das kleinere Segel ist ein wichtiges Detail. Das Modell verstand „das Segel ändern“ als Änderung des großen orangefarbenen Segels, nicht aller segelförmigen Flächen. Wenn beide Segel umgefärbt werden sollen, benennen Sie beide. Das Beispiel zeigt, warum auch eine plausibel aussehende Überarbeitung mit der konkreten Anfrage abgeglichen werden muss.

Die Grafik als bearbeitbare Bestandteile definieren

Beginnen Sie mit dem Verwendungszweck: eine kleine Webillustration, ein später umzufärbendes Diagramm oder eine einfache Animation. Fordern Sie aussagekräftige Gruppen-IDs, eine Zeichenfläche und einige klare Einschränkungen an. Eine vage Bitte um eine beeindruckende Illustration liefert kaum Kriterien dafür, ob das Ergebnis brauchbar ist.

Unser erster Prompt war bewusst eng gefasst. Er bleibt hier als tatsächlich getestete Eingabe im englischen Original erhalten:

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.

Aus diesen Vorgaben ergeben sich konkrete Abnahmekriterien. Die Gruppen lassen sich später gezielt animieren. Die viewBox macht die Skalierung vorhersehbar. Ohne externe Ressourcen lässt sich dieses Beispiel leichter zwischen Rechnern übertragen. Die Größenbegrenzung soll eine unnötig aufwendige Datei vermeiden; sie ist eine Bitte im Prompt, keine serverseitig erzwungene SVG-Grenze.

Das Ergebnis ist absichtlich einfach. Es belegt nicht, dass Fable ein Foto rekonstruieren, ein Markenzeichen exakt erhalten oder automatisch produktionsreife Motion Graphics erstellen kann. Für die Konvertierung eines vorhandenen Rasterentwurfs nutzen Sie den separaten Workflow von PNG zu bearbeitbarem SVG. Dort ist die Übereinstimmung mit der Vorlage das wichtigste Prüfkriterium.

Die erste API-Anfrage senden

Die exakt getestete Anfrage liegt als first-request.json im ZIP. Hinterlegen Sie Ihren eigenen Schlüssel über Ihren üblichen Prozess zur Geheimnisverwaltung in der Shell-Umgebung. Er gehört weder in die JSON-Datei noch in ein Browserskript, einen Screenshot oder eine versionierte Datei.

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

Die relevanten Anfragefelder lauten:

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

Das kurze JSON oben zeigt die Konfiguration; die heruntergeladene Anfrage enthält den vollständigen Prompt. Der Ofox-Modellbezeichner unterscheidet sich vom Bezeichner claude-fable-5-2 der direkten Claude-API. Kombinieren Sie Modellnamen und Basis-URLs nicht zwischen Anbietern. Hinweise zur Einrichtung finden Sie in der API-Anleitung für Fable 5.2 und der Referenz zur Ofox Messages API.

Laut Spezifikation ist Fables adaptives Denken immer aktiviert. low steuert den Denkaufwand und deaktiviert das Denken nicht. Wir haben in diesem Beispiel weder temperature noch top_p oder eine erzwungene Tool-Auswahl ergänzt. Liefert eine migrierte Anfrage den Fehler 400, lesen Sie zunächst die Fehlerbehebung zu Parametern und Tool-Auswahl bei Fable 5.2, bevor Sie den Zeichenprompt ändern.

SVG vor dem Darstellen extrahieren und prüfen

Die Antwort ist in JSON eingebettet. Sammeln Sie die Blöcke vom Typ text und speichern Sie daraus das SVG-Markup; speichern Sie nicht die gesamte Antwort als .svg. Prüfen Sie, ob die Antwort vollständig abgeschlossen wurde und das schließende Tag </svg> enthält. Eine durch die Ausgabegrenze gestoppte Antwort kann unvollständig sein, auch wenn ein toleranter Viewer bereits einen Teil des Bildes anzeigt.

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())

Extraktion ist keine Bereinigung. Prüfen Sie vor dem Einbetten generierten Markups in eine Website, ob die Datei Skripte, Event-Handler, externe URLs, foreignObject oder eingebettete Bilder enthält. Bei diesem kleinen Beispiel haben wir die tatsächlichen Dateien geprüft und keine solchen aktiven oder externen Inhalte gefunden. Eine einfache Zeichenfolgensuche ist jedoch keine Sicherheitsgarantie für beliebige SVG-Dateien.

Öffnen Sie die vertrauenswürdige Ausgabe im Browser und anschließend gegebenenfalls im vorgesehenen Vektoreditor. Prüfen Sie Silhouette, Ebenenreihenfolge und Freiräume. In diesem Beispiel überlagern die Wellen den unteren Teil des Rumpfs, wie bei einem Boot im Wasser zu erwarten. Auch ein korrektes XML-Dokument kann eine falsche Ebenenreihenfolge oder ein abgeschnittenes Motiv haben.

Eine gezielte Überarbeitung anfordern

Die zweite Anfrage enthielt den ursprünglichen Nutzerprompt und das zurückgegebene SVG als Gesprächskontext, gefolgt von dieser Anweisung. Auch sie bleibt zur Reproduzierbarkeit im englischen Original:

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.

Verwenden Sie revision-request.json mit demselben Endpunkt, um den zweiten Aufruf nachzuvollziehen. Dieses Beispiel übergab den sichtbaren SVG-Text erneut; es ist weder ein Tool-Aufrufprotokoll noch eine Demonstration zum Erhalt verborgener Denkinhalte. Wenn Sie Tool-Verläufe zwischen Modellversionen übernehmen, nutzen Sie die separate Anleitung zum Modellwechsel in Agenten, statt diesen minimalen Dialog ungeprüft zu übertragen.

Unser Strukturvergleich fand bei den vorhandenen Formen und Gruppen eine geänderte Füllfarbe. Pfadkoordinaten, IDs und andere Formattribute blieben erhalten. Zusätzlich aktualisierte das Modell den barrierefreien Titel und die Beschreibung und ergänzte einen internen Style-Block. Das ist genauer als die Behauptung, die Datei sei ansonsten byteweise unverändert geblieben.

Animation prüfen und eine statische Fassung behalten

Die überarbeitete SVG verwendet CSS-Keyframes für #boat und verschiebt die Gruppe zur Mitte eines Drei-Sekunden-Zyklus um sechs Einheiten nach oben. Im Browser beobachteten wir zwischen zwei Messzeitpunkten eine Änderung der Transformation des Boots; Sonne und Wellen waren nicht animiert. Das CSS enthält eine Regel für reduzierte Bewegung. Wir prüften die Regel, schalteten die entsprechende Betriebssystemeinstellung in diesem Test aber nicht um.

Öffnen Sie revision.svg direkt, um die Bewegung zu sehen. Ein Screenshot zeigt nur einen Frame; auch ein PNG-Export ist statisch. Manche Editoren oder Dokumentanwendungen ignorieren CSS-Animationen in SVG, obwohl der Browser sie abspielt. Behalten Sie first.svg als statische Quelle oder erstellen Sie eine ausdrücklich statische Kopie der überarbeiteten Grafik, wenn dies das gewünschte Ausgabeformat ist. Versprechen Sie nicht, dass die Animation beim Einfügen in PowerPoint, eine E-Mail oder ein Designtool erhalten bleibt.

Wenn Sie mehrere SVGs inline in dasselbe HTML-Dokument einfügen, können wiederholte IDs und globale CSS-Selektoren miteinander kollidieren. Nutzen Sie eindeutige ID-Präfixe oder binden Sie jede SVG als eigene Bildressource ein. Unser Prüfviewer zeigt jede Datei getrennt an, damit die Animation des überarbeiteten Boots nicht auf das Original wirkt.

Für eine GIF-Ausgabe müssen Sie eine Folge von Frames aufnehmen oder rendern und separat kodieren. Eine SVG-Animation und ein exportiertes GIF sind unterschiedliche Dateien mit unterschiedlichen Vor- und Nachteilen. Die GIF-Anleitung erklärt Timing und Exportprüfungen; ändern Sie nicht einfach die Dateiendung.

Kosten und Aussagekraft der beiden Aufrufe

Die Schätzungen verwenden die Ofox-Katalogfelder vom 11. November mit 0,000008 USD pro Eingabe-Token und 0,00004 USD pro Ausgabe-Token. Die zurückgegebenen Cache-Zähler waren null. Die Rechnung lautet: Eingabe-Tokens × Eingabetarif plus Ausgabe-Tokens × Ausgabetarif. Es handelt sich nicht um eine verifizierte endgültige Kontobelastung. Die gemessenen Zeiten umfassen den beobachteten Anfrage-Rückantwort-Zyklus und sind kein allgemeiner Geschwindigkeitsbenchmark. Aufwendigere Grafiken, längere Gespräche und Wiederholungsversuche können Zeit und Kosten verändern.

Die Belege tragen eine eng begrenzte Schlussfolgerung: Dieser Zugangsweg lieferte für diese Vorgaben eine gültige, gruppierte Vektorillustration und eine kontrolliert überarbeitete animierte Fassung. Das belegt weder allgemeine künstlerische Überlegenheit noch eine Erfolgsquote. Der Nutzen liegt in der überprüfbaren Datei und der reproduzierbaren Methode.

Wenn Sie lieber im Dialog arbeiten, beginnen Sie in Ofox Chat und nennen Sie SVG als Ausgabeformat, bearbeitbare Gruppen und die genaue gewünschte Änderung. Die Aufrufe dieses Artikels liefen über die API. Wir haben nicht geprüft, ob ein bestimmter Chat-Modus Fable 5.2 auswählt oder diese API-Parameter zugänglich macht. Verwenden Sie den API-Workflow, wenn Sie das modellspezifische Ergebnis nachvollziehen möchten.