HTML5的SVG和Canvas有什么区别？如何选择？
在HTML5的图形开发领域，SVG（可缩放矢量图形）和Canvas（画布）是两种最核心的绘图技术。它们都能够实现在网页上绘制丰富的图形，但两者的底层原理、渲染机制和使用场景却截然不同。理解它们的区别，是前端开发者做出正确技术选型的关键。
一、 核心概念解析
1. SVG (Scalable Vector Graphics)
SVG是一种基于XML的矢量图形描述语言。它并不是通过像素来绘制图形，而是通过数学公式和几何属性（如坐标、半径、路径等）来描述图形。SVG是DOM的一部分，每个图形元素都是一个独立的DOM节点。
2. Canvas
Canvas是HTML5新增的一个元素，它提供了一块画布，并通过JavaScript提供的Canvas API（或WebGL）进行逐像素的绘制。Canvas采用“即时模式”渲染，一旦图形绘制完成，浏览器不会保存图形的信息，只保留最终的像素结果。
二、 SVG与Canvas的核心区别
1. 渲染机制与基本属性
SVG是矢量的，基于形状描述，放大缩小不会失真，分辨率独立。
Canvas是位图的，基于像素渲染，放大后会出现锯齿或模糊，分辨率依赖画布设定的宽高。
2. DOM与事件交互
SVG的每个图形都是DOM节点，可以为单独的图形绑定事件（如click、hover），也支持CSS样式修改和DOM操作。
Canvas只有一个
<canvas>标签，内部绘制的图形没有DOM结构。如果要实现事件交互，必须通过JavaScript计算鼠标坐标与图形的碰撞检测（Hit Detection），无法直接对单个图形绑定事件。
3. 性能表现
SVG在元素数量较少时表现优异，但当图形数量极其庞大（如上万个节点）时，由于DOM节点过多，会导致重绘和事件解析的性能急剧下降。
Canvas在图形数量庞大时性能极佳，因为它是操作像素，没有DOM开销。但是，如果画布尺寸非常大，或者需要频繁局部重绘，Canvas的性能消耗也会增加。
4. 动画实现方式
SVG可以通过CSS3动画或SMIL原生动画实现，修改DOM属性即可驱动动画，开发相对简单。
Canvas必须依赖JavaScript的
requestAnimationFrame不断清除画布并重新绘制来实现动画，对开发者的算法要求较高。
三、 代码示例对比
下面通过绘制一个简单的圆形，来直观感受两者代码语法的差异：
SVG 绘制圆形：
<svg width="200" height="200"> <circle cx="100" cy="100" r="50" fill="red" /> </svg>
Canvas 绘制圆形：
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
// 如果有复杂的逻辑判断
if (ctx && canvas) {
console.log("<绘制完成>");
}
</script>四、 如何选择？
选择SVG还是Canvas，并没有绝对的对错，主要取决于项目的具体需求。你可以参考以下决策树：
适合选择SVG的场景：
高保真度的静态图形或简单动画： 如Logo、图标、信息图表。
需要无损缩放： 图形需要适应不同分辨率的屏幕，且不能有锯齿。
强交互需求： 需要对每个图形进行独立的事件绑定、悬停效果或CSS样式控制。
可访问性要求高： SVG内的文本可以被搜索引擎抓取，也支持屏幕阅读器。
适合选择Canvas的场景：
大量图形与粒子： 如数据量巨大的散点图、粒子系统、雪花飘落效果。
实时渲染与高性能游戏： 需要每秒60帧的频繁重绘，如2D/3D游戏、射击类游戏。
图像处理与像素操作： 需要对图片进行滤镜、裁剪、合成等像素级别的操作。
复杂场景无需局部交互： 整个画面作为一个整体，不需要单独操作画面中的某个小元素。
总结：SVG像是在网页中贴上了一张“智能贴纸”，每个贴纸都能独立控制且永远清晰；Canvas则像是一块“黑板”，你可以快速在上面画任何东西，但一旦画上去就融为一体，只能擦除重画。如果你需要查看更多复杂的交互式Demo，可以访问 www.ipipp.com 获取丰富的实战案例。在实际开发中，两者甚至可以结合使用，例如用SVG绘制UI控件，用Canvas渲染底层游戏画面，以达到最优的性能与体验。