HTML5的SVG和Canvas有什么区别？如何选择？

HTML5的SVG和Canvas主要区别在于：SVG基于矢量和DOM，适合无损缩放、结构化图形和交互；Canvas基于像素，适合大量动态绘制和高性能动画。选择时需根据图形复杂度、交互需求、可访问性及开发效率综合权衡。

• 底层技术

  SVG：基于矢量图形和DOM结构，每个图形元素（如圆形、矩形）都是独立的DOM节点，可通过JavaScript或CSS直接操作属性（颜色、位置等）。

  Canvas：基于像素的即时模式绘图表面，通过JavaScript调用绘图API（如fillRect、arc）直接操作像素，不保留图形对象信息，修改需重绘整个或部分区域。

• 缩放与清晰度

  SVG：矢量图形可无限缩放不失真，适合响应式设计和高DPI屏幕。

  Canvas：像素化图形，放大后会出现锯齿或模糊，适合固定尺寸或无需缩放的场景。

• 交互与可访问性

  SVG：支持直接绑定事件监听器（如点击、悬停），且内容可被搜索引擎抓取，屏幕阅读器可识别，适合需要SEO和辅助技术的场景。

  Canvas：需手动计算点击坐标是否落在图形区域内，内容对搜索引擎不友好，需额外提供描述性文本。

• 性能表现

  SVG：元素数量较少时性能良好，但元素过多（如数万个独立路径）会导致DOM树庞大，内存消耗高，渲染卡顿。

  Canvas：适合处理大量像素操作（如游戏、实时动画、大数据可视化），性能高效，但复杂交互需更多代码实现。

• 适用场景

  图标与Logo：需无损缩放，适配不同设备分辨率。

  复杂图表（元素较少）：如柱状图、折线图，需交互高亮或动态更新。

  地图应用：每个区域为独立SVG路径，支持点击查询详情。

  动态Logo：通过CSS或JavaScript实现颜色、动画变化。

• 优势

  无损缩放：矢量特性保证高分辨率下清晰度。

  DOM可操作性：支持JavaScript/CSS直接修改属性，实现复杂交互。

  SEO友好：内容为XML文本，可被搜索引擎抓取。

  可访问性：屏幕阅读器可识别图形中的文本信息。

• 局限性

  性能瓶颈：元素数量过多时（如密集CAD图纸），DOM操作导致卡顿。

  像素级操作受限：无法直接对图片进行复杂滤镜处理或模拟自然效果（如水波纹）。

• 适用场景

  游戏开发：处理大量动态对象（如粒子、精灵）和物理模拟。

  实时动画：如2D物理引擎、粒子效果，需高频更新画面。

  大数据可视化：绘制数十万数据点的散点图或热力图，避免DOM开销。

  图片/视频处理：实现像素级滤镜、裁剪或实时编辑。

• 交互动画表现

  高效渲染：通过“即时模式”擦除旧画面、绘制新内容，GPU加速提升流畅度。例如，用Canvas实现的2D物理引擎可模拟上百个球体碰撞，帧率稳定在60FPS。

  灵活控制：提供丰富绘图API（路径、渐变、阴影），结合requestAnimationFrame实现复杂动画。

• 大数据可视化表现

  海量数据支持：直接操作像素绘制点、线、面，避免DOM元素数量限制。例如，百万级地理空间可视化通过分层渲染和局部更新实现流畅交互。

  自定义渲染逻辑：支持高密度图、流向图等复杂图表类型，满足实时数据流处理需求。

• 图形复杂度与数量

  静态/结构化图形：选择SVG（如公司Logo、简单图标）。

  动态/海量元素：选择Canvas（如粒子动画、实时游戏场景）。

• 交互粒度

  独立元素交互：SVG支持直接绑定事件（如地图区域点击）。

  整体画布交互：Canvas需手动实现命中检测（如拖动场景、缩放视图）。

• 可访问性与SEO

  需被抓取或识别：优先SVG（如导航图标、数据图表）。

  纯展示性内容：Canvas可接受（如游戏画面），但需补充文本描述。

• 开发效率与工具生态

  快速开发：SVG有成熟工具（如Illustrator）和库（如D3.js）。

  高性能需求：Canvas需手动编码，但库（如Pixi.js）可简化流程。

• 混合使用策略

  静态部分用SVG：如页面布局、图标。

  动态部分用Canvas：如交互式图表中的实时数据渲染。

  示例：数据看板中，SVG绘制框架和标题，Canvas渲染动态折线图。

总结：SVG与Canvas并非对立，而是互补工具。SVG适合结构化、交互性强且需SEO的场景，Canvas擅长高性能动态渲染。实际项目中，根据需求灵活选择或混合使用，可最大化发挥两者优势。