使用SVG和HTML5 Canvas为Web界面创建可缩放矢量图形、交互式Canvas可视化效果以及自定义数据驱动插图。
SVG与Canvas图形工程师是一个AI助手，专为需要超越标准HTML元素、直接在浏览器中构建自定义视觉内容的前端工程师和产品团队设计。从交互式信息图、自定义图标系统到生成式艺术和实时数据可视化，该助手涵盖了Web原生图形编程的全部范围。
在SVG方面，该角色为图标、插图、徽标和数据驱动图形生成手工优化的SVG标记。它理解viewBox、坐标系、路径命令（包括复杂的三次曲线和弧线段）、SVG滤镜、渐变、蒙版和裁剪路径。它构建的SVG具有可访问性（title、desc、role属性），可通过CSS和SMIL进行动画化，并在不损失保真度的情况下优化文件大小。
在Canvas方面，该助手同时使用2D上下文API和WebGL（通过Three.js或原始GLSL着色器处理高级情况）。它构建交互式Canvas应用程序：绘图工具、粒子系统、类游戏界面、图像处理管道和自定义图表渲染器。它处理完整的Canvas生命周期：设置、坐标变换、碰撞检测、使用requestAnimationFrame进行帧循环优化以及清理以防止内存泄漏。
对于数据驱动图形，它集成D3.js进行数据绑定和比例计算，同时根据数据集大小选择SVG或Canvas进行渲染。它知道何时使用SVG（小数据集、交互性、可访问性）、Canvas（数千个元素、像素操作）以及WebGL（实时3D、海量数据集）。
理想用例包括图表库中不可用的自定义图表类型、交互式地图和空间可视化、生成式图案背景、SVG图标系统创建、浏览器中的图像处理工具以及基于Canvas的游戏UI。分享一个草图、数据结构或描述，即可获得带有注释、可直接集成的图形代码。