SVG是基于XML的矢量图形格式，JavaScript可直接操作其DOM节点；Canvas是位图绘图API，依赖JS逐帧绘制像素。SVG为“可编程的文档”，Canvas为“可编程的画布”。
SVG 是基于 XML 的矢量图形格式，JavaScript 可以直接操作它的 DOM 节点；Canvas 是位图绘图 API，依赖 JavaScript 逐帧绘制像素。两者本质不同：SVG 是“可编程的文档”，Canvas 是“可编程的画布”。
SVG 的 JavaScript 操作方式
SVG 元素是标准 DOM 节点，能用 document.getElementById、querySelector 获取，也能用 setAttribute、classList 或直接赋值属性（如 el.cx.baseVal.value = 100）修改图形状态。动画可用 CSS transition、SMIL（已逐步弃用）或 requestAnimationFrame 驱动属性变化。
- 创建元素：
document.createElementNS('http://www.w3.org/2000/svg', 'circle') - 添加到页面：
svgEl.appendChild(circle) - 响应事件：
circle.addEventListener('click', () => {...})—— 每个图形都可独立绑定事件 - 缩放/平移不模糊：浏览器自动重绘矢量路径，适合图标、图表、交互式地图等需要高保真和可访问性的场景
Canvas 的 JavaScript 操作方式
Canvas 提供一个渲染上下文（getContext('2d') 或 webgl），所有绘图都通过调用上下文方法完成，如 ctx.fillRect()、ctx.beginPath()、ctx.stroke()。它不保留图形对象，只保存最终像素结果。
- 无法直接获取某个“圆形”元素 —— 绘制后即消失，需自行维护图形数据结构
- 事件需手动计算坐标（如判断点击是否在某图形内），没有原生事件委托
- 适合高频重绘场景：游戏、粒子动画、实时图像处理、数据可视化中百万级点渲染
- 导出为 PNG/JPEG 简单：
canvas.toDataURL('image/png')
核心差异对比
渲染模型：SVG 是保留模式（Retained Mode），浏览器记住每个图形及其属性；Canvas 是即时模式（Immediate Mode），绘图命令执行完就丢弃上下文状态。
立即学习“Java免费学习笔记（深入）”；
性能取舍：SVG 节点多（如上万条路径）时 DOM 开销大、重排重绘慢；Canvas 在节点极多但结构简单时更高效，但失去矢量优势和语义化能力。
可访问性与 SEO：SVG 支持 <title>、<desc>、ARIA 属性，能被屏幕阅读器识别；Canvas 默认不可读，需额外用 aria-label 或外挂描述。
样式控制：SVG 可用 CSS 控制颜色、阴影、过渡；Canvas 样式全靠 JS 设置上下文属性，CSS 仅能控制 canvas 元素本身（如边框、大小）。
如何选择
选 SVG 当你需要：图形有交互（如点击某省份高亮）、要打印或缩放到任意尺寸、内容需被搜索引擎索引、团队熟悉 HTML/CSS 开发流程。
选 Canvas 当你需要：每秒重绘几十次（如动画/游戏）、处理图像像素（滤镜、合成）、绘制海量散点且不强调单点交互、或集成 WebGL 进行 3D 渲染。
两者也能协作：例如用 SVG 做 UI 图标和文字标注，Canvas 负责底层动态图形渲染，再用 canvas 作为 <foreignObject> 的容器（较少见）或分层叠加实现混合效果。
