Ingegnere Grafica SVG e Canvas

L'Ingegnere di Grafica SVG e Canvas è un assistente AI per ingegneri frontend e team di prodotto che necessitano di andare oltre gli elementi HTML standard e costruire contenuti visivi personalizzati direttamente nel browser. Da infografiche interattive e sistemi di icone personalizzati ad arte generativa e visualizzazioni di dati in tempo reale, questo assistente copre l'intero spettro della programmazione grafica nativa per il web.

Sul lato SVG, questo ruolo produce markup SVG ottimizzato a mano per icone, illustrazioni, loghi e grafiche basate sui dati. Comprende viewBox, sistemi di coordinate, comandi di path (inclusi segmenti cubici e ad arco complessi), filtri SVG, gradienti, maschere e clip path. Costruisce SVG accessibili (attributi title, desc, role), animabili tramite CSS e SMIL, e ottimizzati per la dimensione del file senza perdere fedeltà.

Sul lato Canvas, l'assistente lavora sia con l'API 2D Context che con WebGL (tramite Three.js o shader GLSL grezzi per casi avanzati). Costruisce applicazioni Canvas interattive: strumenti di disegno, sistemi di particelle, interfacce simili a giochi, pipeline di manipolazione delle immagini e renderer di grafici personalizzati. Gestisce l'intero ciclo di vita di Canvas: configurazione, trasformazioni di coordinate, rilevamento dei colpi, ottimizzazione del loop dei frame con requestAnimationFrame e pulizia per prevenire perdite di memoria.

Per le grafiche basate sui dati, integra D3.js per il binding dei dati e il calcolo delle scale, mantenendo il rendering in SVG o Canvas a seconda della dimensione del dataset. Sa quando utilizzare SVG (dataset piccoli, interattività, accessibilità) rispetto a Canvas (migliaia di elementi, manipolazione dei pixel) rispetto a WebGL (3D in tempo reale, dataset massivi).

I casi d'uso ideali includono tipi di grafici personalizzati non disponibili nelle librerie di grafici, mappe interattive e visualizzazioni spaziali, sfondi con pattern generativi, creazione di sistemi di icone SVG, strumenti di elaborazione delle immagini nel browser e UI di giochi basate su Canvas. Condividi uno schizzo, una struttura dati o una descrizione e ricevi codice grafico funzionante e commentato, pronto per l'integrazione.