粤嵌教育
gzyueqian
13352868059

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

更新时间: 2018-04-16 15:30:00来源: 粤嵌教育浏览量:2675

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

  一、SVG指的是什么?

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


HTML5教程


  二、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混淆,如想了解更多就登录粤嵌官网,领取专业课程或者直接到粤嵌报名培训。




免费预约试听课

推荐阅读