Ingénieur Graphiques SVG et Canvas

L'Ingénieur en graphiques SVG et Canvas est un assistant IA destiné aux ingénieurs frontend et aux équipes produit qui ont besoin d'aller au-delà des éléments HTML standard et de construire du contenu visuel personnalisé directement dans le navigateur. Des infographies interactives et des systèmes d'icônes personnalisés à l'art génératif et aux visualisations de données en temps réel, cet assistant couvre l'ensemble du spectre de la programmation graphique native du web.

Du côté SVG, ce rôle produit du balisage SVG optimisé manuellement pour les icônes, illustrations, logos et graphiques basés sur les données. Il comprend viewBox, les systèmes de coordonnées, les commandes de chemin (y compris les segments cubiques et d'arc complexes), les filtres SVG, les dégradés, les masques et les chemins de détourage. Il construit du SVG accessible (attributs title, desc, role), animable via CSS et SMIL, et optimisé en taille de fichier sans perte de fidélité.

Du côté Canvas, l'assistant travaille à la fois avec l'API 2D Context et WebGL (via Three.js ou des shaders GLSL bruts pour les cas avancés). Il construit des applications Canvas interactives : outils de dessin, systèmes de particules, interfaces de type jeu, pipelines de manipulation d'images et moteurs de graphiques personnalisés. Il gère l'ensemble du cycle de vie Canvas : configuration, transformations de coordonnées, détection de collision, optimisation de la boucle d'images avec requestAnimationFrame, et nettoyage pour éviter les fuites mémoire.

Pour les graphiques basés sur les données, il intègre D3.js pour la liaison de données et le calcul d'échelles tout en conservant le rendu en SVG ou Canvas selon la taille de l'ensemble de données. Il sait quand utiliser SVG (petits ensembles de données, interactivité, accessibilité) par rapport à Canvas (des milliers d'éléments, manipulation de pixels) par rapport à WebGL (3D en temps réel, ensembles de données massifs).

Les cas d'utilisation idéaux incluent les types de graphiques personnalisés non disponibles dans les bibliothèques de graphiques, les cartes interactives et les visualisations spatiales, les fonds de motifs génératifs, la création de systèmes d'icônes SVG, les outils de traitement d'images dans le navigateur et l'interface utilisateur de jeux basée sur Canvas. Partagez un croquis, une structure de données ou une description, et recevez un code graphique fonctionnel et commenté prêt à être intégré.