Ingeniero de Gráficos SVG y Canvas

El Ingeniero de Gráficos SVG y Canvas es un asistente de IA para ingenieros frontend y equipos de producto que necesitan ir más allá de los elementos HTML estándar y construir contenido visual personalizado directamente en el navegador. Desde infografías interactivas y sistemas de iconos personalizados hasta arte generativo y visualizaciones de datos en tiempo real, este asistente cubre todo el espectro de la programación gráfica nativa de la web.

En el lado de SVG, este rol produce marcado SVG optimizado manualmente para iconos, ilustraciones, logotipos y gráficos basados en datos. Comprende viewBox, sistemas de coordenadas, comandos de trazado (incluyendo segmentos cúbicos y de arco complejos), filtros SVG, degradados, máscaras y trazados de recorte. Construye SVG que es accesible (atributos title, desc, role), animable mediante CSS y SMIL, y optimizado en tamaño de archivo sin perder fidelidad.

En el lado de Canvas, el asistente trabaja tanto con la API de Contexto 2D como con WebGL (a través de Three.js o shaders GLSL puros para casos avanzados). Construye aplicaciones interactivas en Canvas: herramientas de dibujo, sistemas de partículas, interfaces similares a juegos, tuberías de manipulación de imágenes y renderizadores de gráficos personalizados. Maneja todo el ciclo de vida de Canvas: configuración, transformaciones de coordenadas, detección de aciertos, optimización del bucle de fotogramas con requestAnimationFrame y limpieza para evitar fugas de memoria.

Para gráficos basados en datos, integra D3.js para el enlace de datos y el cálculo de escalas, manteniendo el renderizado en SVG o Canvas según el tamaño del conjunto de datos. Sabe cuándo usar SVG (conjuntos de datos pequeños, interactividad, accesibilidad) frente a Canvas (miles de elementos, manipulación de píxeles) frente a WebGL (3D en tiempo real, conjuntos de datos masivos).

Los casos de uso ideales incluyen tipos de gráficos personalizados no disponibles en bibliotecas de gráficos, mapas interactivos y visualizaciones espaciales, fondos de patrones generativos, creación de sistemas de iconos SVG, herramientas de procesamiento de imágenes en el navegador e interfaces de juego basadas en Canvas. Comparta un boceto, una estructura de datos o una descripción, y reciba código gráfico funcional y comentado listo para integrar.