Canvas 和 SVG 区别

基础特性对比：

• svg 是矢量图（基于XML描述路径），而canvas 是位图（基于像素绘制）
• svg 缩放不失真； 而 canvas放大后边缘模糊/失真
• svg通过DOM元素渲染；而canvas是通过JavaScript API 逐像素绘制

功能与交互对比：

• svg 支持DOM事件（点击/悬停）；而canvas 需要手动计算坐标实现事件
• svg 直接操作DOM属性实时更新；而canvas需要清空画布重新绘制
• svg 可通过css\js 实现动画；而 canvas 依赖request AnimationFrame 循环重绘

性能与场景：

• svg 图形复杂时几点过多时渲染慢；而canvas 高频重绘性能更优
• svg 可直接保存为矢量文件；而 canvas 导出位图（png/jpg）
• svg 适合 静态图标/地图/流程图； 而canvas 适合游戏/粒子特效/图像处理