Como criar ilustrações SVG editáveis e animações com Fable 5.2

O Fable 5.2 pode produzir código SVG que um navegador renderiza como arte vetorial editável. No nosso exemplo com duas chamadas, ele criou uma ilustração de barco a vela organizada em grupos; depois mudou a cor da vela principal e acrescentou um movimento suave sem alterar a geometria vetorial. Você pode baixar os dois arquivos e reproduzir as solicitações abaixo.

Isso é criação visual por código, não geração nativa de imagens. A especificação do Fable 5.2, da Anthropic, lista texto e imagens como entradas e texto como saída. Um SVG é texto que descreve formas; o navegador ou editor vetorial transforma essas instruções em uma imagem. A distinção explica tanto a possibilidade de edição quanto os limites: a saída precisa ser código válido, e uma resposta bem-sucedida não garante uma arte atraente.

Testamos o endpoint da Ofox compatível com Anthropic em 11 de novembro de 2026, usando anthropic/claude-fable-5.2, esforço low e limite de saída de 8.192 tokens. Trata-se de uma pequena ilustração original, não de um benchmark contra outros modelos nem de um teste de cenas 3D complexas. Este guia é publicado pela Ofox.

Baixe as saídas reais

O kit de exemplos SVG do Fable contém o primeiro SVG, a versão animada revisada, os corpos exatos das solicitações, o texto retornado, as evidências de uso e uma comparação estrutural. Não contém chave de API. Mantenha o original e a revisão em arquivos separados para inspecionar o que mudou.

Captura no navegador das saídas reais da API em nosso visualizador local de evidências, em inglês. Não é a interface do Ofox Chat. A capa do artigo é uma ilustração conceitual separada.

A vela menor é um detalhe importante. O modelo interpretou “mudar a vela” como mudar a grande vela laranja, não todas as regiões em formato de vela. Se você quer recolorir as duas, nomeie os dois componentes. O exemplo mostra por que uma revisão aparentemente plausível ainda precisa ser comparada com o pedido real.

Defina a arte como componentes editáveis

Comece pelo uso pretendido: uma pequena ilustração para uma página web, um diagrama que será recolorido ou uma animação simples. Peça IDs de grupo com significado, uma área de desenho e algumas restrições. Um pedido vago de “ilustração incrível” oferece pouca base para verificar se o resultado é útil.

Nosso primeiro prompt foi deliberadamente delimitado. Abaixo, mantemos o original em inglês usado no teste para permitir a reprodução:

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.

Essas restrições criam verificações concretas. Os grupos permitem direcionar uma animação posterior. A viewBox torna a escala previsível. Excluir recursos externos facilita mover o exemplo entre computadores. O limite de tamanho reduz a chance de pedir um arquivo desnecessariamente elaborado; é uma instrução no prompt, não um limite de SVG imposto pelo servidor.

O resultado é intencionalmente simples. Não demonstra que o Fable consiga recriar uma fotografia, preservar uma marca com exatidão ou produzir automaticamente motion graphics prontos para produção. Para converter um design raster existente, use o fluxo de PNG para SVG editável, no qual a fidelidade à entrada é o teste principal.

Faça a primeira solicitação à API

A solicitação exata testada está no ZIP como first-request.json. Defina sua própria chave no ambiente do shell usando seu processo habitual de gerenciamento de segredos. Não a coloque no JSON, em um script de navegador, em uma captura de tela ou em um arquivo versionado.

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

Os campos relevantes da solicitação são:

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

O JSON resumido acima mostra a configuração; a solicitação disponível para download inclui o prompt completo. O identificador de modelo da Ofox difere de claude-fable-5-2, usado na API direta da Claude. Não misture nomes de modelos e URLs base de provedores diferentes. Consulte o guia da API do Fable 5.2 e a referência da API Messages da Ofox para configurar o acesso.

Segundo a especificação, o pensamento adaptativo do Fable está sempre ativado. O valor low define o esforço de raciocínio; não desliga o pensamento. Não acrescentamos temperature, top_p nem seleção forçada de ferramentas neste exemplo. Se uma solicitação migrada retornar 400, consulte o guia de erros de parâmetros e seleção de ferramentas do Fable 5.2 antes de mudar o prompt de desenho.

Extraia e inspecione o SVG antes de renderizar

A resposta vem em um envelope JSON. Reúna os blocos do tipo text e salve o código SVG; não salve a resposta inteira como arquivo .svg. Confira se a resposta terminou e contém a tag de fechamento </svg>. Uma resposta interrompida pelo limite de saída pode conter um documento incompleto mesmo que um visualizador tolerante mostre parte da imagem.

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

Extrair não é sanitizar. Antes de usar o código gerado em um site, inspecione scripts, manipuladores de eventos, URLs externas, foreignObject e imagens incorporadas. Neste pequeno exemplo, inspecionamos os arquivos reais e não encontramos esse tipo de conteúdo ativo ou externo. Uma busca simples por texto não é garantia de segurança para qualquer SVG.

Abra a saída confiável em um navegador e, se for o destino previsto, no seu editor vetorial. Confira silhueta, ordem das camadas e espaços negativos. As ondas deste exemplo se sobrepõem à parte inferior do casco, como esperado para um barco na água. Um documento XML correto ainda pode ter camadas visualmente erradas ou um objeto cortado.

Peça uma revisão delimitada

A segunda solicitação incluiu o prompt original e o SVG retornado no contexto da conversa, seguidos desta instrução. Também mantemos aqui o original em inglês usado no teste:

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.

Use revision-request.json no mesmo endpoint para reproduzir a segunda chamada. O exemplo reenviou o texto visível do SVG; não é um histórico de chamadas de ferramentas nem uma demonstração de preservação do pensamento oculto. Se você estiver transportando um histórico de ferramentas entre versões de modelos, use o guia de troca de modelos em agentes em vez de adaptar essa conversa mínima sem análise.

Nossa comparação estrutural encontrou uma mudança de preenchimento entre as formas e grupos existentes. As coordenadas dos caminhos, IDs e outros atributos das formas foram preservados. O modelo também atualizou o título e a descrição de acessibilidade e acrescentou um bloco de estilo interno. Isso é mais preciso do que afirmar que o restante do arquivo ficou idêntico byte a byte.

Verifique a animação e preserve uma alternativa estática

O SVG revisado usa keyframes CSS em #boat, movendo o grupo seis unidades para cima no ponto médio de um ciclo de três segundos. No navegador, observamos a transformação do barco mudar entre duas amostras, enquanto sol e ondas não tinham animação. O CSS contém uma regra de redução de movimento; inspecionamos essa regra, mas não alternamos a preferência do sistema operacional durante o teste.

Abra revision.svg diretamente para ver o movimento. Uma captura de tela mostra apenas um quadro, e uma exportação PNG também será estática. Alguns editores e aplicativos de documentos ignoram animações CSS em SVG mesmo que o navegador as reproduza. Guarde first.svg como fonte estática ou crie uma cópia explicitamente estática da arte revisada quando esse for o formato exigido. Não prometa que inserir um SVG animado no PowerPoint, em um e-mail ou em uma ferramenta de design preservará o movimento.

Ao inserir vários SVGs inline no mesmo documento HTML, IDs repetidos e seletores CSS globais podem interferir uns nos outros. Use prefixos de ID únicos ou isole cada SVG como um recurso de imagem. Nosso visualizador mostra cada arquivo separadamente para que a animação do barco revisado não afete o original.

Para entregar um GIF, capture ou renderize uma sequência de quadros e codifique essa sequência separadamente. Animação SVG e GIF exportado são arquivos diferentes, com vantagens e limitações diferentes. O guia de criação de GIFs explica duração e verificações de exportação; não basta renomear a extensão do SVG.

Quanto custaram as duas chamadas e o que elas demonstram

As estimativas usam os campos do catálogo da Ofox de 11 de novembro: US$ 0,000008 por token de entrada e US$ 0,00004 por token de saída. Os contadores de cache retornados foram zero. O cálculo é tokens de entrada × tarifa de entrada mais tokens de saída × tarifa de saída; não é um débito final verificado na conta. Os tempos incluem a ida e volta observada da solicitação e não constituem um benchmark geral de velocidade. Arte mais detalhada, conversas mais longas e novas tentativas podem mudar o tempo e o custo.

As evidências sustentam uma conclusão limitada: essa rota produziu uma ilustração vetorial válida e agrupada e uma revisão animada controlada para estas instruções. Não demonstram superioridade artística geral nem taxa de sucesso. O resultado útil é o arquivo inspecionável e o método reproduzível.

Se preferir trabalhar por conversa, comece no Ofox Chat e especifique saída SVG, grupos editáveis e a revisão exata. As chamadas deste artigo usaram a API; não verificamos se um modo específico do Chat seleciona o Fable 5.2 ou expõe esses parâmetros. Use o fluxo via API quando for importante reproduzir o resultado desse modelo específico.