HTML5：Canvas 和 SVG 对比

ゝ一世哀愁。 2022-11-18 05:49 171阅读 0赞

**Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。**

## SVG ##

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

## Canvas ##

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

## Canvas 与 SVG 的比较 ##

下表列出了 canvas 与 SVG 之间的一些不同之处。

### Canvas ###

*  依赖分辨率
 *  不支持事件处理器
 *  弱的文本渲染能力
 *  能够以 .png 或 .jpg 格式保存结果图像
 *  最适合图像密集型的游戏，其中的许多对象会被频繁重绘

### SVG ###

*  不依赖分辨率
 *  支持事件处理器
 *  最适合带有大型渲染区域的应用程序（比如谷歌地图）
 *  复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
 *  不适合游戏应用

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:middle;width:116px;">&nbsp;</td> 
 <td style="vertical-align:middle;width:396px;">Canvas</td> 
 <td style="vertical-align:middle;width:436px;">SVG</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:116px;">功能</td> 
 <td style="vertical-align:middle;width:396px;">简便，2D绘图API</td> 
 <td style="vertical-align:middle;width:436px;">功能丰富，各种图形，动画</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:116px;">特点</td> 
 <td style="vertical-align:middle;width:396px;">像素，脚本驱动，不可操作</td> 
 <td style="vertical-align:middle;width:436px;">矢量，XML，可操作</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:116px;">性能</td> 
 <td style="vertical-align:middle;width:396px;">适合小面积，大数量应用场景（&gt;10k）</td> 
 <td style="vertical-align:middle;width:436px;">大面积，小数量应用场景（&lt;10k）</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:116px;">支持</td> 
 <td style="vertical-align:middle;width:396px;">主流浏览器，ie9+</td> 
 <td style="vertical-align:middle;width:436px;">主流浏览器，ie9+，其他svg阅读器</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:116px;">事件交互</td> 
 <td style="vertical-align:middle;width:396px;">用户交互到像素点（x,y）</td> 
 <td style="vertical-align:middle;width:436px;">用户交互到图形元素（path,rect）</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:116px;">文件格式</td> 
 <td style="vertical-align:middle;width:396px;">.png　　.jpg</td> 
 <td style="vertical-align:middle;width:436px;">.svg</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:116px;">分辨率</td> 
 <td style="vertical-align:middle;width:396px;">依赖分辨率</td> 
 <td style="vertical-align:middle;width:436px;">不依赖分辨率</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:116px;">事件处理</td> 
 <td style="vertical-align:middle;width:396px;">不支持</td> 
 <td style="vertical-align:middle;width:436px;">支持</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;width:116px;">游戏应用</td> 
 <td style="vertical-align:middle;width:396px;">最适合图像密集型的游戏，其中的许多对象会被频繁重绘</td> 
 <td style="vertical-align:middle;width:436px;">不适合游戏应用</td> 
 </tr> 
 </tbody> 
</table>