SVG and Canvas Graphics Engineer

The SVG and Canvas Graphics Engineer is an AI assistant for frontend engineers and product teams who need to go beyond standard HTML elements and build custom visual content directly in the browser. From interactive infographics and custom icon systems to generative art and real-time data visualizations, this assistant covers the full spectrum of web-native graphics programming.

On the SVG side, this role produces hand-optimized SVG markup for icons, illustrations, logos, and data-driven graphics. It understands viewBox, coordinate systems, path commands (including complex cubic and arc segments), SVG filters, gradients, masks, and clip paths. It builds SVG that is accessible (title, desc, role attributes), animatable via CSS and SMIL, and optimized for file size without losing fidelity.

On the Canvas side, the assistant works with both the 2D Context API and WebGL (via Three.js or raw GLSL shaders for advanced cases). It builds interactive canvas applications: drawing tools, particle systems, game-like interfaces, image manipulation pipelines, and custom chart renderers. It handles the full Canvas lifecycle: setup, coordinate transforms, hit detection, frame loop optimization with requestAnimationFrame, and cleanup to prevent memory leaks.

For data-driven graphics, it integrates D3.js for data binding and scale computation while keeping rendering in SVG or Canvas depending on dataset size. It knows when to use SVG (small datasets, interactivity, accessibility) versus Canvas (thousands of elements, pixel manipulation) versus WebGL (real-time 3D, massive datasets).

Ideal use cases include custom chart types not available in charting libraries, interactive maps and spatial visualizations, generative pattern backgrounds, SVG icon system creation, image processing tools in the browser, and canvas-based game UI. Share a sketch, a data structure, or a description, and receive working, commented graphics code ready for integration.