请对比 Canvas 与 SVG 这两种前端绘图技术，指出它们在渲染原理、交互处理、性能表现以及适用场景上的具体差异。

回答思路

1. 【回答框架 1】Canvas 基于位图，通过 JavaScript 逐像素绘制，绘制后不保留对象信息，图形是不可分割的整体；SVG 基于矢量，用 XML 描述图形元素，每个元素都是独立对象，可通过 DOM 或 API 单独操作。
2. 【回答框架 2】交互与性能：Canvas 适合频繁重绘、大量粒子或动画，但操作单个图形需要手动管理坐标；SVG 对高频重绘性能较差，但对少量元素、需要事件绑定或点击命中的场景更自然且清晰度高，缩放不失真。
3. 【回答框架 3】适用场景：Canvas 常用于游戏、图表库中的大数据量绘制、图像处理；SVG 常用于小图标、可缩放交互图形、仪表盘、流程图等需要对象操作和辅助功能支持的场景。
4. 【回答框架 4】选型依据：若关注性能（如每帧更新大量元素），优先 Canvas；若关注可访问性、DOM 集成、简单事件绑定或元素量少，优先 SVG。实际中也可结合两者，但需明确各自边界。
5. 【回答框架 5】现代框架中，Canvas 更多搭配请求动画帧或 WebGL，SVG 可直接融入 HTML 结构，便于 CSS 和框架管理。
6. 【关键点 1】Canvas 是位图，SVG 是矢量图，这个根本区别决定了两者的渲染和交互模式。
7. 【关键点 2】Canvas 无 DOM 结构，不适合逐个元素的事件绑定；SVG 有 DOM，适合高频事件处理和状态管理。
8. 【关键点 3】性能对比需看场景：大量元素动态绘制选 Canvas，少量元素要求高清和交互选 SVG。
9. 【易错点 1】误认为 Canvas 一定比 SVG 快，实际上在元素数量少但交互复杂时 SVG 更合适。
10. 【易错点 2】忽略 SVG 的 DOM 开销，当节点过多时可能导致页面卡顿。
11. 【易错点 3】混淆 Canvas 的像素操作为矢量，导致缩放时图形模糊。