svg html5 canvas,粤嵌分享HTML5教程中关于SVG和CANVAS的区别

之前我们有提到Canvas的一些内容，在HTML5教程中，HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。那么SVG指的又是什么？它与Canvas有何区别，小编也来介绍一下：

一、SVG指的是什么？

SVG是万维网联盟的标准，指可伸缩矢量图形 (Scalable Vector Graphics)，它一般用于定义用于网络的基于矢量的图形，使用 XML格式定义图形，SVG图像在放大或改变尺寸的情况下其图形质量不会有损失。

二、SVG的优势

与其他图像格式相比(比如 JPEG 和 GIF)，使用 SVG 的优势在于：

1、SVG 图像可通过文本编辑器来创建和修改；

2、SVG 图像可被搜索、索引、脚本化或压缩；

3、SVG 是可伸缩的；

4、SVG 图像可在任何的分辨率下被高质量地打印，在放大或改变尺寸的情况下其图形质量不会有损失。

三、SVG 与 Canvas两者间的区别

SVG 是一种使用XML描述2D图形的语言。而Canvas是通过 JavaScript来绘制2D 图形。

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

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

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

通过上面的介绍，大家对SVG也有了个初步的了解。在HTML5教程学习中，注意不要与Canvas混淆，如想了解更多就登录粤嵌官网，领取专业课程或者直接到粤嵌报名培训。