×

pin_drop当前位置:知识文库 ❯ 图文

多媒体：SVG与Canvas对比 - 完整教程与代码示例

一、教程简介

SVG 和 Canvas 是 HTML5 提供的两种图形渲染技术，各有优劣、各有适用场景。SVG 是基于 XML 的矢量图形，采用保留模式渲染；Canvas 是基于像素的位图画布，采用即时模式渲染。本教程将从多个维度全面对比 SVG 与 Canvas，帮助你在实际项目中做出正确的技术选择。

二、核心概念

渲染模式对比

特性 SVG Canvas
渲染模式 保留模式（Retained） 即时模式（Immediate）
图形表示 DOM 节点树 像素位图
渲染方式 浏览器自动渲染 JavaScript 逐帧绘制
状态管理 DOM 自动管理 开发者手动管理

技术本质

SVG：声明式图形，用 XML 描述"画什么"，浏览器负责渲染。

Canvas：命令式绘图，用 JavaScript 命令"怎么画"，开发者负责每一步。

三、语法与用法

SVG 示例

代码示例

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="#58a6ff" />
</svg>

Canvas 示例

代码示例

<canvas id="c" width="200" height="200"></canvas>
<script>
  const ctx = document.getElementById('c').getContext('2d');
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, Math.PI * 2);
  ctx.fillStyle = '#58a6ff';
  ctx.fill();
</script>

四、代码示例

示例1：SVG 与 Canvas 全面对比演示

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG 与 Canvas 全面对比</title>
  <style>
    body {
      margin: 0; padding: 20px;
      background: #0d1117; color: #c9d1d9;
      font-family: 'Segoe UI', sans-serif;
      display: flex; flex-direction: column; align-items: center;
    }
    .comparison {
      display: flex; gap: 20px; flex-wrap: wrap;
      justify-content: center; max-width: 800px;
    }
    .panel {
      flex: 1; min-width: 350px;
      background: #161b22; border: 1px solid #30363d;
      border-radius: 8px; padding: 15px;
    }
    .panel h2 { font-size: 16px; margin: 0 0 10px; }
    .panel svg, .panel canvas {
      background: #0d1117; border-radius: 4px;
      width: 100%; height: auto;
    }
    .svg-title { color: #58a6ff; }
    .canvas-title { color: #3fb950; }
    table {
      width: 100%; border-collapse: collapse;
      margin-top: 20px; font-size: 13px;
    }
    th, td {
      padding: 8px 12px; text-align: left;
      border-bottom: 1px solid #30363d;
    }
    th { background: #21262d; color: #58a6ff; }
    .good { color: #3fb950; }
    .bad { color: #e94560; }
    .neutral { color: #f8b500; }
  </style>
</head>
<body>
  <h1>SVG 与 Canvas 全面对比</h1>

  <!-- 交互对比 -->
  <div class="comparison">
    <div class="panel">
      <h2 class="svg-title">SVG - 点击交互</h2>
      <svg id="svgDemo" viewBox="0 0 320 200" xmlns="http://www.w3.org/2000/svg">
        <circle id="svgCircle1" cx="80" cy="100" r="40" fill="#58a6ff" cursor="pointer" />
        <circle id="svgCircle2" cx="160" cy="100" r="40" fill="#3fb950" cursor="pointer" />
        <circle id="svgCircle3" cx="240" cy="100" r="40" fill="#f8b500" cursor="pointer" />
        <text x="160" y="180" text-anchor="middle" font-size="12" fill="#8b949e">点击圆形变色（DOM事件）</text>
      </svg>
    </div>

    <div class="panel">
      <h2 class="canvas-title">Canvas - 点击交互</h2>
      <canvas id="canvasDemo" width="320" height="200"></canvas>
    </div>
  </div>

  <!-- 缩放对比 -->
  <div class="comparison" style="margin-top:20px;">
    <div class="panel">
      <h2 class="svg-title">SVG - 缩放无损</h2>
      <svg viewBox="0 0 100 100" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="cmpGrad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#e94560" />
            <stop offset="100%" stop-color="#58a6ff" />
          </linearGradient>
        </defs>
        <circle cx="50" cy="50" r="40" fill="url(#cmpGrad)" />
        <text x="50" y="55" text-anchor="middle" font-size="10" fill="#fff" font-weight="bold">SVG</text>
      </svg>
      <p style="font-size:12px;color:#8b949e;text-align:center;">矢量图形，任意缩放不失真</p>
    </div>

    <div class="panel">
      <h2 class="canvas-title">Canvas - 缩放模糊</h2>
      <canvas id="canvasScale" width="300" height="200"></canvas>
      <p style="font-size:12px;color:#8b949e;text-align:center;">位图，放大后出现锯齿/模糊</p>
    </div>
  </div>

  <script>
    // === SVG 交互 ===
    const colors = ['#58a6ff', '#e94560', '#3fb950', '#f8b500', '#d2a8ff'];
    document.querySelectorAll('#svgDemo circle').forEach(circle => {
      circle.addEventListener('click', function() {
        const currentColor = this.getAttribute('fill');
        const idx = colors.indexOf(currentColor);
        this.setAttribute('fill', colors[(idx + 1) % colors.length]);
      });
    });

    // === Canvas 交互 ===
    const canvas = document.getElementById('canvasDemo');
    const ctx = canvas.getContext('2d');
    const canvasCircles = [
      { x: 80, y: 100, r: 40, color: '#3fb950' },
      { x: 160, y: 100, r: 40, color: '#58a6ff' },
      { x: 240, y: 100, r: 40, color: '#f8b500' }
    ];

    function drawCanvasCircles() {
      ctx.clearRect(0, 0, 320, 200);
      canvasCircles.forEach(c => {
        ctx.beginPath();
        ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2);
        ctx.fillStyle = c.color;
        ctx.fill();
      });
      ctx.fillStyle = '#8b949e';
      ctx.font = '12px sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText('点击圆形变色（手动碰撞检测）', 160, 180);
    }
    drawCanvasCircles();

    canvas.addEventListener('click', function(e) {
      const rect = canvas.getBoundingClientRect();
      const mx = (e.clientX - rect.left) * (canvas.width / rect.width);
      const my = (e.clientY - rect.top) * (canvas.height / rect.height);

      canvasCircles.forEach(c => {
        const dx = mx - c.x, dy = my - c.y;
        if (dx * dx + dy * dy <= c.r * c.r) {
          const idx = colors.indexOf(c.color);
          c.color = colors[(idx + 1) % colors.length];
        }
      });
      drawCanvasCircles();
    });

    // === Canvas 缩放演示 ===
    const scaleCanvas = document.getElementById('canvasScale');
    const sCtx = scaleCanvas.getContext('2d');
    const grad = sCtx.createLinearGradient(100, 50, 250, 150);
    grad.addColorStop(0, '#e94560');
    grad.addColorStop(1, '#58a6ff');
    sCtx.beginPath();
    sCtx.arc(150, 100, 80, 0, Math.PI * 2);
    sCtx.fillStyle = grad;
    sCtx.fill();
    sCtx.fillStyle = '#fff';
    sCtx.font = 'bold 24px sans-serif';
    sCtx.textAlign = 'center';
    sCtx.textBaseline = 'middle';
    sCtx.fillText('Canvas', 150, 100);
  </script>

  <!-- 详细对比表 -->
  <table style="max-width:800px; margin-top:30px;">
    <thead>
      <tr>
        <th>对比维度</th>
        <th>SVG</th>
        <th>Canvas</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>渲染模式</td><td>保留模式（DOM）</td><td>即时模式（像素）</td></tr>
      <tr><td>缩放质量</td><td class="good">无损缩放</td><td class="bad">缩放模糊</td></tr>
      <tr><td>事件处理</td><td class="good">元素级 DOM 事件</td><td class="bad">手动碰撞检测</td></tr>
      <tr><td>DOM 操作</td><td class="good">可直接操作</td><td class="bad">无法操作单个图形</td></tr>
      <tr><td>文本处理</td><td class="good">可搜索、可选择</td><td class="bad">不可搜索</td></tr>
      <tr><td>CSS 样式</td><td class="good">支持 CSS 样式</td><td class="bad">不支持 CSS</td></tr>
      <tr><td>大量元素性能</td><td class="bad">DOM 节点多时变慢</td><td class="good">像素操作性能稳定</td></tr>
      <tr><td>动画性能</td><td class="neutral">简单动画好，复杂差</td><td class="good">适合频繁重绘</td></tr>
      <tr><td>图像处理</td><td class="bad">不支持像素操作</td><td class="good">支持像素级操作</td></tr>
      <tr><td>游戏开发</td><td class="bad">不适合</td><td class="good">适合</td></tr>
      <tr><td>图表/数据可视化</td><td class="good">非常适合</td><td class="neutral">可以但需更多工作</td></tr>
      <tr><td>图标系统</td><td class="good">非常适合</td><td class="bad">不适合</td></tr>
      <tr><td>地图应用</td><td class="good">适合（可交互）</td><td class="neutral">可以但交互复杂</td></tr>
      <tr><td>文件大小</td><td class="neutral">复杂图形文件大</td><td class="good">与复杂度无关</td></tr>
      <tr><td>可访问性</td><td class="good">支持 ARIA</td><td class="bad">需要额外处理</td></tr>
      <tr><td>学习曲线</td><td class="neutral">HTML/CSS 基础即可</td><td class="neutral">需要 JavaScript 基础</td></tr>
    </tbody>
  </table>
</body>
</html>

五、浏览器兼容性

特性 SVG Canvas
基本支持 IE9+ IE9+
滤镜 IE10+（部分） 全部支持
SMIL 动画 IE/Edge 不支持 不适用
CSS 动画 IE10+ 不适用
WebGL 不适用 IE11+

六、注意事项与最佳实践

选择决策树

代码示例

需要绘制什么？
├── 图标/Logo → SVG
├── 图表/数据可视化 → SVG（少量数据）/ Canvas（大量数据）
├── 地图 → SVG
├── 游戏 → Canvas
├── 图像处理 → Canvas
├── 需要交互的图形 → SVG
├── 需要大量动画 → Canvas
├── 需要文本搜索 → SVG
├── 需要高 DPI 清晰 → SVG
└── 需要像素操作 → Canvas

可以混合使用

SVG 和 Canvas 不是互斥的，可以在同一页面中混合使用：

代码示例

<!-- SVG 用于图标和 UI 元素 -->
<nav>
  <svg><use href="#icon-menu" /></svg>
</nav>

<!-- Canvas 用于游戏或图像处理 -->
<canvas id="gameCanvas"></canvas>

性能参考数据

场景 SVG Canvas
100 个元素 流畅 流畅
1,000 个元素 轻微延迟 流畅
10,000 个元素 明显卡顿 流畅
100,000 个元素 严重卡顿 仍然流畅

七、代码规范示例

代码示例

// 推荐：根据场景选择技术
function createGraphic(options) {
  const { type, elementCount, needsInteraction, needsPixelOps } = options;

  if (needsPixelOps) return 'canvas';
  if (elementCount > 5000) return 'canvas';
  if (needsInteraction && elementCount < 1000) return 'svg';
  if (type === 'chart' && elementCount < 1000) return 'svg';
  if (type === 'game') return 'canvas';
  return 'svg'; // 默认 SVG
}

// 推荐：SVG 图标系统
// 使用 symbol + use 构建图标系统，避免重复代码

// 推荐：Canvas 动画循环
// 使用 requestAnimationFrame + deltaTime 确保流畅

八、常见问题与解决方案

常见问题

图表库用 SVG 还是 Canvas？

少量数据（< 1000 点）推荐 SVG（如 D3.js）；大量数据（> 1000 点）推荐 Canvas（如 ECharts 大数据模式）；需要交互时 SVG 更方便；需要导出图片时 Canvas 更方便。

游戏开发可以用 SVG 吗？

简单棋盘游戏可以用 SVG，但实时动作游戏必须用 Canvas。SVG 的 DOM 操作开销不适合 60fps 的游戏循环。

如何将 SVG 转换为 Canvas？

使用 XMLSerializer 将 SVG 序列化为字符串，再通过 base64 编码转为 Image 绘制到 Canvas 上。核心代码：new XMLSerializer().serializeToString(svgElement)，然后将结果作为 data URL 加载到 Image 对象中。

如何将 Canvas 导出为 SVG？

Canvas 无法直接导出为 SVG。需要记录所有绘图操作，然后转换为 SVG 路径。建议使用专门的库如 canvas2svg。

SVG 和 Canvas 可以互相覆盖吗？

可以，使用 CSS 定位让它们重叠。将 Canvas 和 SVG 都设置为 position: absolute，放在同一个相对定位的容器中即可实现叠加效果。

九、总结

SVG 与 Canvas 是互补的两种图形技术，关键选择要点：

选择 SVG 的场景

  • 图标和 Logo：矢量无损、CSS 样式、主题切换

  • 数据可视化：交互式图表、D3.js 生态

  • 地图应用：可交互的矢量地图

  • 需要 DOM 操作：元素级事件、可搜索文本

  • 打印需求：矢量输出质量更高

选择 Canvas 的场景

  • 游戏开发：高性能渲染、像素操作

  • 图像处理：滤镜、裁剪、合成

  • 大量图形：超过 1000 个元素时性能更好

  • 实时动画：60fps 渲染循环

  • 数据导出：toDataURL 导出图片

核心区别

维度 SVG Canvas
本质 矢量（XML） 位图（像素）
模式 保留模式 即时模式
交互 DOM 事件 手动检测
缩放 无损 有损
性能 元素少好 元素多好

在实际项目中，根据具体需求选择合适的技术，甚至可以混合使用两者，发挥各自的优势。

小贴士

现代浏览器中，SVG 和 Canvas 的性能差距正在缩小。如果你不确定选择哪种技术，可以优先考虑 SVG，因为它更易于调试（DOM 可视化）、支持 CSS 样式、具备更好的可访问性。只有在遇到性能瓶颈或需要像素级操作时，才需要切换到 Canvas。另外，WebGL 是 Canvas 的高级扩展，适合 3D 图形和复杂视觉效果。

标签： SVG Canvas 图形对比 矢量图 位图 HTML5图形 性能优化

本文涉及AI创作

内容由AI创作，请仔细甄别

list快速访问

上一篇： 多媒体：符号与引用 - 完整教程与代码示例 下一篇： HTML5 API：HTML5 Geolocation API - 完整教程与代码示例

poll相关推荐

作者头像 小晨智能 HTML

框架集成：01 HTML与前端框架概述 - 详细教程与实战指南

发布日期 2026-07-20
本文详细讲解了01 HTML与前端框架概述的核心概念、语法用法和实战示例，帮助开发者快速掌握01 HTML与前端框架概述的使用方法和最佳实践，提升Web开发技能。内容涵盖基础入门到高级应用，适合各阶段开发者学习参考。
作者头像 小晨智能 HTML

实战项目：项目10：个人作品集网站 - 详细教程与实战指南

发布日期 2026-07-20
本文详细讲解了项目10：个人作品集网站的核心概念、语法用法和实战示例，帮助开发者快速掌握项目10：个人作品集网站的使用方法和最佳实践，提升Web开发技能。内容涵盖基础入门到高级应用，适合各阶段开发者学习参考。
作者头像 小晨智能 HTML

实战项目：项目09：任务管理应用 - 详细教程与实战指南

发布日期 2026-07-20
本文详细讲解了项目09：任务管理应用的核心概念、语法用法和实战示例，帮助开发者快速掌握项目09：任务管理应用的使用方法和最佳实践，提升Web开发技能。内容涵盖基础入门到高级应用，适合各阶段开发者学习参考。
作者头像 小晨智能 HTML

实战项目：项目08：天气应用界面 - 详细教程与实战指南

发布日期 2026-07-20
本文详细讲解了项目08：天气应用界面的核心概念、语法用法和实战示例，帮助开发者快速掌握项目08：天气应用界面的使用方法和最佳实践，提升Web开发技能。内容涵盖基础入门到高级应用，适合各阶段开发者学习参考。