SVG与Canvas渲染选择

SVG与Canvas的基本概念

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，使用DOM节点来描述图形。每个图形元素都是独立的DOM节点，可以通过CSS和JavaScript直接操作。Canvas则是通过JavaScript API进行像素级绘制的位图技术，绘制完成后图形不再保留可操作的对象。

// SVG示例
<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>

// Canvas示例
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();

渲染机制对比

SVG的渲染特点

1. 保留模式渲染：维护完整的对象模型
2. 矢量图形：无限缩放不失真
3. 支持CSS样式和动画
4. 事件处理直接在图形元素上绑定

// SVG事件处理
document.querySelector('circle').addEventListener('click', () => {
  console.log('Circle clicked!');
});

Canvas的渲染特点

1. 立即模式渲染：绘制后不保留图形对象
2. 像素操作：适合处理位图效果
3. 高性能大数据量渲染
4. 需要手动实现事件处理

// Canvas点击检测
canvas.addEventListener('click', (e) => {
  const x = e.offsetX;
  const y = e.offsetY;
  // 手动计算是否点击了圆形
  const distance = Math.sqrt(Math.pow(x - 100, 2) + Math.pow(y - 100, 2));
  if (distance <= 50) {
    console.log('Canvas circle clicked!');
  }
});

ECharts中的实现选择

ECharts同时支持SVG和Canvas两种渲染方式，默认使用Canvas。在4.0+版本中可以通过设置renderer参数切换：

// 使用Canvas渲染
const chart = echarts.init(dom, null, { renderer: 'canvas' });

// 使用SVG渲染
const chart = echarts.init(dom, null, { renderer: 'svg' });

大数据量场景

Canvas在渲染海量数据点时性能优势明显。例如渲染10万个散点：

option = {
  xAxis: {},
  yAxis: {},
  series: [{
    type: 'scatter',
    data: new Array(100000).fill(0).map(() => [
      Math.random() * 100,
      Math.random() * 100
    ])
  }]
};

交互复杂场景

SVG在需要复杂交互时更合适。例如实现可拖拽的节点：

option = {
  series: [{
    type: 'graph',
    draggable: true,
    data: [{
      id: 'node1',
      x: 100,
      y: 100,
      symbolSize: 50
    }]
  }]
};

移动端适配考量

SVG在移动端的优势

1. 分辨率无关性：自动适配Retina屏幕
2. 文字渲染更清晰
3. 减少内存占用（对DOM数量有限制的设备）

Canvas在移动端的优化

1. 使用devicePixelRatio适配高清屏
2. 分层渲染减少重绘区域
3. 离屏Canvas预渲染静态内容

// 高清屏适配
const dpr = window.devicePixelRatio || 1;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
canvas.width = width * dpr;
canvas.height = height * dpr;
ctx.scale(dpr, dpr);

动态效果实现差异

SVG动画实现

1. 使用CSS动画或SMIL
2. 直接修改DOM属性
3. 适合属性过渡动画

// SVG动画示例
const circle = document.querySelector('circle');
circle.animate([
  { r: 50 },
  { r: 70 }
], {
  duration: 1000,
  iterations: Infinity,
  direction: 'alternate'
});

Canvas动画实现

1. 需要requestAnimationFrame循环
2. 全量或差异重绘
3. 适合复杂粒子效果

// Canvas动画示例
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 绘制逻辑
  requestAnimationFrame(animate);
}
animate();

内存管理与性能优化

SVG内存管理

1. 节点数量直接影响内存占用
2. 复杂的滤镜效果消耗较大
3. 建议：
   • 合理使用use元素复用节点
   • 及时移除不可见元素

Canvas性能优化

1. 避免频繁的Canvas状态改变
2. 使用离屏Canvas缓存静态内容
3. 建议：
   • 合并绘制调用
   • 使用web worker处理复杂计算

// 离屏Canvas示例
const offscreen = document.createElement('canvas');
const offCtx = offscreen.getContext('2d');
// 预渲染
offscreen.width = 200;
offscreen.height = 200;
offCtx.fillStyle = 'blue';
offCtx.fillRect(0, 0, 200, 200);

// 主Canvas绘制
ctx.drawImage(offscreen, 0, 0);

浏览器兼容性现状

SVG兼容性注意事项

1. 部分旧浏览器对SMIL动画支持不全
2. 滤镜效果在各浏览器实现有差异
3. 移动端WebView可能有特殊限制

Canvas兼容性问题

1. IE9以下需要polyfill
2. WebGL上下文需要检测支持
3. 某些绘制API存在前缀差异

// 特性检测示例
if (typeof CanvasRenderingContext2D !== 'undefined') {
  // 支持Canvas
}

if (typeof SVGRect !== 'undefined') {
  // 支持SVG
}

调试与问题排查

SVG调试技巧

1. 使用浏览器开发者工具直接检查DOM节点
2. 通过修改CSS属性实时调试样式
3. 监控DOM节点数量变化

Canvas调试方法

1. 保存Canvas状态快照
2. 使用轮廓模式调试绘制顺序
3. 性能分析工具检测重绘区域

// Canvas调试工具函数
function debugCanvas(canvas) {
  // 绘制边界框
  ctx.strokeStyle = 'red';
  ctx.strokeRect(0, 0, canvas.width, canvas.height);
  
  // 显示FPS
  let lastTime = performance.now();
  let frameCount = 0;
  setInterval(() => {
    const now = performance.now();
    const fps = Math.round(1000 / (now - lastTime) * frameCount);
    lastTime = now;
    frameCount = 0;
    ctx.fillStyle = 'black';
    ctx.fillText(`FPS: ${fps}`, 10, 20);
  }, 1000);
}

实际项目选择建议

选择SVG的情况

1. 需要高保真矢量输出
2. 复杂交互需求（如地图区域点击）
3. 动态修改样式频繁
4. 需要无障碍访问支持

选择Canvas的情况

1. 数据可视化大数据量场景
2. 需要复杂视觉效果（如粒子系统）
3. 游戏开发等高性能要求
4. 需要像素级操作（如图像处理）

ECharts高级配置技巧

混合渲染策略

ECharts支持部分组件使用SVG，部分使用Canvas的混合模式：

option = {
  // 坐标系使用Canvas
  xAxis: { renderer: 'canvas' },
  yAxis: { renderer: 'canvas' },
  // 系列使用SVG
  series: [{
    type: 'line',
    renderer: 'svg'
  }]
};

按需切换渲染器

根据设备能力动态选择渲染器：

function initChart(dom) {
  const isMobile = /Mobi|Android/i.test(navigator.userAgent);
  const renderer = isMobile ? 'canvas' : 'svg';
  return echarts.init(dom, null, { renderer });
}