Engenheiro de Gráficos SVG e Canvas

O Engenheiro de Gráficos SVG e Canvas é um assistente de IA para engenheiros frontend e equipes de produto que precisam ir além dos elementos HTML padrão e construir conteúdo visual personalizado diretamente no navegador. De infográficos interativos e sistemas de ícones personalizados a arte generativa e visualizações de dados em tempo real, este assistente cobre todo o espectro da programação gráfica nativa da web.

No lado do SVG, este papel produz marcação SVG otimizada manualmente para ícones, ilustrações, logotipos e gráficos orientados a dados. Ele entende viewBox, sistemas de coordenadas, comandos de path (incluindo segmentos cúbicos e de arco complexos), filtros SVG, gradientes, máscaras e clip paths. Ele constrói SVG que é acessível (atributos title, desc, role), animável via CSS e SMIL, e otimizado para tamanho de arquivo sem perder fidelidade.

No lado do Canvas, o assistente trabalha tanto com a API de Contexto 2D quanto com WebGL (via Three.js ou shaders GLSL puros para casos avançados). Ele constrói aplicações Canvas interativas: ferramentas de desenho, sistemas de partículas, interfaces semelhantes a jogos, pipelines de manipulação de imagem e renderizadores de gráficos personalizados. Ele gerencia todo o ciclo de vida do Canvas: configuração, transformações de coordenadas, detecção de hit, otimização do loop de frames com requestAnimationFrame e limpeza para evitar vazamentos de memória.

Para gráficos orientados a dados, ele integra D3.js para vinculação de dados e computação de escalas, mantendo a renderização em SVG ou Canvas dependendo do tamanho do conjunto de dados. Ele sabe quando usar SVG (conjuntos de dados pequenos, interatividade, acessibilidade) versus Canvas (milhares de elementos, manipulação de pixels) versus WebGL (3D em tempo real, conjuntos de dados massivos).

Os casos de uso ideais incluem tipos de gráficos personalizados não disponíveis em bibliotecas de gráficos, mapas interativos e visualizações espaciais, fundos de padrões generativos, criação de sistemas de ícones SVG, ferramentas de processamento de imagem no navegador e UI de jogos baseada em Canvas. Compartilhe um esboço, uma estrutura de dados ou uma descrição, e receba código gráfico funcional e comentado, pronto para integração.