在现代 Web 开发中，图形渲染是构建可视化界面、图表、动画和游戏的重要组成部分。HTML 提供了两种主流的 2D 图形绘制方案：Canvas 和 SVG（Scalable Vector Graphics）。
虽然它们都可以用于绘图，但在底层实现、性能特点、交互能力等方面存在显著差异。本文将深入分析 Canvas 和 SVG 的原理、优缺点以及适用场景，帮助你根据项目需求选择最合适的图形绘制方案。
📌 一、什么是 Canvas？
✅ 简介：
<canvas> 是 HTML5 新增的一个标签，它提供一个空白的画布区域，开发者可以通过 JavaScript 使用 Canvas API 在其上进行像素级别的绘图操作。
✅ 基本用法示例：
html
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 80);
</script>✅ 核心特点：
| 特性 | 描述 |
|---|---|
| 渲染方式 | 像素级绘制（位图画布） |
| 分辨率依赖 | ✅ 依赖分辨率，缩放时图像会模糊 |
| DOM 操作 | ❌ 不支持直接 DOM 操作 |
| 事件支持 | ❌ 不支持原生事件绑定（需手动检测点击区域） |
| 文本渲染 | ⚠️ 支持有限，效果不如 HTML/SVG |
| 图像导出 | ✅ 可以导出为 PNG、JPG 等图片格式 |
| 性能表现 | ✅ 高频重绘效率高，适合复杂动画 |
✅ 适用场景：
- 游戏开发（如实时战斗、粒子特效）
- 数据可视化（动态图表）
- 实时图像处理（滤镜、绘图工具）
- 图片合成与截图功能
📌 二、什么是 SVG？
✅ 简介：
SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形描述语言。它使用可读性强的文本格式来定义图形对象，并且每个图形元素都存在于文档对象模型（DOM）中，可以被 CSS 或 JavaScript 操作。
✅ 基本用法示例：
html
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="60" fill="green" />
</svg>✅ 核心特点：
| 特性 | 描述 |
|---|---|
| 渲染方式 | 矢量图形（数学公式描述） |
| 分辨率依赖 | ❌ 不依赖分辨率，放大不失真 |
| DOM 操作 | ✅ 支持 DOM 操作和样式控制 |
| 事件支持 | ✅ 支持鼠标/触摸等事件绑定 |
| 文本渲染 | ✅ 支持高质量文本渲染 |
| 图像导出 | ⚠️ 可通过数据 URI 导出，但不如 Canvas 方便 |
| 性能表现 | ❌ 复杂图形渲染速度慢，适合静态或低频更新内容 |
✅ 适用场景：
- 地图应用（如 Google Maps）
- 图标系统（图标字体替代方案）
- 动态图表（如 ECharts、D3.js）
- UI 组件（按钮、进度条等）
- 打印输出（矢量图清晰度高）
📊 三、Canvas 与 SVG 对比表
| 对比维度 | Canvas | SVG |
|---|---|---|
| 类型 | 位图画布 | 矢量图形 |
| 渲染方式 | 像素级绘制 | 数学公式描述 |
| 分辨率依赖 | ✅ 是 | ❌ 否 |
| 是否支持事件 | ❌ 否（需手动实现） | ✅ 是 |
| 是否可编辑 | ❌ 否（非结构化） | ✅ 是（基于 XML 结构） |
| 是否支持 DOM | ❌ 否 | ✅ 是 |
| 缩放质量 | ❌ 差（模糊） | ✅ 好（无损） |
| 适合场景 | 游戏、高频重绘、图像处理 | 图标、地图、图表、UI 设计 |
| 性能瓶颈 | 图像复杂度不影响性能 | 图形对象过多会降低性能 |
| 文本渲染 | ⚠️ 效果一般 | ✅ 高质量文本渲染 |
🧠 四、如何选择 Canvas 还是 SVG？
✅ 推荐使用 Canvas 的情况：
- 需要高性能的实时渲染；
- 图形频繁变化，如动画、游戏；
- 需要导出图像为 PNG/JPG；
- 不需要复杂的交互逻辑。
✅ 推荐使用 SVG 的情况：
- 需要高保真图形，如图标、LOGO；
- 要求良好的可访问性和语义化；
- 需要响应用户交互（如点击、悬停）；
- 图形相对静态，不频繁重绘；
- 支持响应式设计和高清显示。
📌 五、结合使用：Canvas + SVG 的混合模式
在一些高级应用中，也可以结合两者的优势：
- 使用 SVG 构建 UI 控件和静态背景；
- 使用 Canvas 实现动画、粒子效果等动态内容；
- 利用 SVG 的可编辑性制作图形编辑器，Canvas 用于预览渲染结果。
✅ 六、总结
| 项目 | Canvas | SVG |
|---|---|---|
| 中文名 | 画布 | 可缩放矢量图形 |
| 渲染方式 | 像素级绘制 | 数学矢量描述 |
| 是否支持事件 | ❌ | ✅ |
| 是否支持 DOM | ❌ | ✅ |
| 是否支持缩放 | ❌ | ✅ |
| 适用场景 | 游戏、图像处理、高频重绘 | 图标、地图、图表、UI 组件 |
✅ 七、结语
Canvas 和 SVG 是前端图形开发中的"双子星"，各有千秋。Canvas 更偏向于底层操作和高性能渲染，而 SVG 更注重语义化、交互性和跨平台兼容性。
作为前端开发者，理解它们的核心差异和应用场景，有助于我们在构建 Web 应用时做出更合理的技术选型，提升用户体验和开发效率。