Как создать редактируемую SVG-иллюстрацию и анимацию с Fable 5.2

Fable 5.2 может написать код SVG, который браузер отобразит как редактируемую векторную иллюстрацию. В нашем примере из двух вызовов модель сначала создала парусную лодку с именованными группами, затем изменила цвет главного паруса и добавила плавное движение, сохранив векторную геометрию. Оба файла можно скачать и повторить приведённые ниже запросы.

Это создание изображения через код, а не нативная генерация картинок. В спецификации Fable 5.2 Anthropic указывает текст и изображения на входе, текст на выходе. SVG — текстовое описание фигур, которое браузер или векторный редактор превращает в картинку. Отсюда и удобство редактирования, и ограничения: код должен быть корректным, а успешный ответ не гарантирует красивой иллюстрации.

Мы проверили Anthropic-совместимый endpoint Ofox 11 ноября 2026 года с моделью 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.

Результат намеренно простой. Он не доказывает, что Fable точно восстановит фотографию или товарный знак либо автоматически создаст готовую к публикации сложную анимацию. Если нужно преобразовать существующее растровое изображение, используйте отдельное руководство 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 отличается от прямого Claude API ID claude-fable-5-2. Не смешивайте имена моделей разных провайдеров и базовые URL. Для настройки см. руководство Fable 5.2 API и справочник Ofox Messages API.

По спецификации адаптивное мышление Fable включено всегда. Low effort задаёт уровень усилий рассуждения, а не отключает мышление. Мы не добавляли temperature, top_p или принудительный выбор инструмента. Если после переноса запрос возвращает 400, сначала изучите разбор параметров и tool choice 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 сам по себе не исключает ошибочного наложения или обрезки объекта.

Попросите ограниченное изменение

Второй запрос содержал исходный пользовательский промпт и полученный 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 на тот же endpoint. В примере повторно передавался видимый текст SVG; это не история вызовов инструментов и не демонстрация сохранения скрытого мышления. Для переноса истории инструментов между версиями модели используйте руководство по переключению модели Agent, а не копируйте эту минимальную переписку без изменений.

Структурное сравнение обнаружило одну изменённую заливку среди существующих фигур и групп. Координаты путей, ID и остальные атрибуты фигур сохранились. Модель также обновила доступные для средств чтения с экрана заголовок и описание, добавила внутренний блок стилей. Это точнее, чем утверждать, что все прочие байты файла остались неизменными.

Проверьте анимацию и сохраните статичную версию

В изменённом SVG CSS keyframes применяются к #boat: в середине трёхсекундного цикла лодка поднимается на шесть единиц. В браузере мы наблюдали изменение transform лодки между двумя замерами; солнце и волны не анимировались. В CSS есть правило reduced-motion. Мы изучили его, но во время этого теста не переключали соответствующую настройку операционной системы.

Откройте revision.svg напрямую, чтобы увидеть движение. Скриншот показывает только один кадр, экспорт PNG также статичен. Некоторые редакторы и офисные приложения игнорируют CSS-анимацию SVG, хотя браузер её воспроизводит. Сохраните first.svg как статичный исходник или создайте явно статичную копию изменённого рисунка, если требуется именно такой результат. Не обещайте сохранение движения при вставке SVG в PowerPoint, письмо или редактор дизайна.

При встроенном размещении нескольких SVG в одном HTML повторяющиеся ID и глобальные CSS-селекторы могут влиять друг на друга. Используйте уникальные префиксы ID либо изолируйте SVG как отдельные изображения. В нашем просмотрщике файлы отображаются отдельно, поэтому анимация изменённой лодки не затрагивает оригинал.

Для GIF отдельно захватите или отрендерите последовательность кадров, затем закодируйте её. Анимированный SVG и экспортированный GIF — разные файлы с разными ограничениями. В руководстве по GIF описаны длительности кадров и проверки экспорта; простая замена расширения не поможет.

Стоимость двух вызовов и границы выводов

Расчёт использует поля каталога Ofox на 11 ноября: 0,000008 USD за входной токен и 0,00004 USD за выходной. Возвращённые счётчики кеша равнялись нулю. Формула: входные токены × входной тариф + выходные токены × выходной тариф. Это оценка, а не проверенное окончательное списание со счёта. Время включает наблюдаемый полный цикл запроса и не является общим тестом скорости. Детализация рисунка, длинный диалог и повторные попытки могут менять и время, и стоимость.

Данные подтверждают узкий вывод: этот маршрут создал корректную векторную иллюстрацию с группами и ограниченную анимированную правку по данному заданию. Они не доказывают общего художественного превосходства или определённой доли успешных запусков. Практическая ценность — проверяемый файл и воспроизводимый способ работы.

Для диалогового сценария можно начать в Ofox Chat, указав SVG, редактируемые группы и точное изменение. В этой статье использовался API. Мы не проверяли, выбирает ли конкретный режим Chat Fable 5.2 и доступны ли в нём эти API-параметры. Если нужен воспроизводимый результат именно этой модели, используйте API-процесс.