之前我们有提到Canvas的一些内容,在HTML5教程中,HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是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混淆,如想了解更多就登录粤嵌官网,领取专业课程或者直接到粤嵌报名培训。