[JavaScript]Canvas和SVG的比较

迈不过友情╰ 2022-12-06 15:07 178阅读 0赞

### Canvas 与 SVG 的比较 ###

#### svg是什么？ ####

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。  
SVG 用来定义用于网络的基于矢量的图形。  
SVG 使用 XML 格式定义图形。  
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。  
SVG 是万维网联盟的标准。  
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。

#### canvas是什么？ ####

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

知道了svg和canvas是什么之后，我们就来比较一下canvas和svg。

canvas和svg的区别比较：

#### 首先我们从时间上看canvas与svg的区别： ####

canvas是html5提供的新元素，而svg存在的历史要比canvas久远，已经有十几年了。

svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。

#### 其次我们从功能上看canvas与svg的区别： ####

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

SVG 是一种使用 XML 描述 2D 图形的语言。  
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。  
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

#### 最后我们来看canvas与svg技术应用上的比较： ####

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

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关 svg配合css3动画_使用CSS和Snap.svg的SVG动画

svg配合css3动画 ![Snap.svg][] Today I wanted to share with you the ease of animation in SV

Dear 丶/ 2023年02月22日 03:41/ 0 赞/ 30 阅读

相关 HTML5 Canvas 和 SVG

Canvas是使用JavaScript程序绘图(动态生成)， SVG是使用XML文档描述来绘图 > Canvas适用场景 > > Canvas提供的功能更原始，适合像素处

女爷i/ 2023年01月12日 01:53/ 0 赞/ 236 阅读

相关 [JavaScript]Canvas和SVG的比较

Canvas 与 SVG 的比较 svg是什么？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。 SVG 用来定义用于网络的基

迈不过友情╰/ 2022年12月06日 15:07/ 0 赞/ 179 阅读

相关 svg mysql_SVG介绍

SVG介绍 SVG是指可缩放矢量图(Scalable Vector Graphics)。SVG使用XML格式来定义图形。SVG可以直接嵌入到HTML页面中。位图和矢量图

柔情只为你懂/ 2022年10月26日 12:58/ 0 赞/ 237 阅读

相关 GML、SVG、VML的比较

GML、SVG和VML都是基于XML的可用来描述矢量图形的标记语言，都是XML词表，它们的语法并不难理解，但它们都有各自不同的用途和特点，下面简单介绍一下。 GML(Geog

左手的ㄟ右手/ 2022年09月22日 15:54/ 0 赞/ 275 阅读

相关 SVG和Canvas的区别

1）SVG：使用XML文档描述来绘图图形类型：矢量图操作对象：基于图形元素元素：多个图形元素（Rect，Path，Line...）驱动：支持脚本和css 适用

冷不防/ 2022年06月09日 13:48/ 0 赞/ 170 阅读

相关【SVG】SVG快速入门

前言 SVG 指可缩放矢量图形，是用于描述二维矢量图形的一种图形格式。SVG 中预定了七种形状元素，分别是： 1. 矩形 2. 圆形 3. 椭圆形 4. 线段

- 日理万妓/ 2022年06月02日 07:20/ 0 赞/ 387 阅读

相关 SVG_SVG动画案例

尊重原创，欢迎转载，转载请注明： FROM GA\_studio [http://blog.csdn.net/tianjian4592][http_blog.

柔情只为你懂/ 2022年05月24日 05:57/ 0 赞/ 381 阅读

相关【svg】svg动画

如果你之前没有接触过svg，可以看下这个简略图：[ https://www.processon.com/view/link/5ae205a2e4b0411f64d1f65a][

àì夳堔傛蜴生んèń/ 2022年05月18日 07:51/ 0 赞/ 341 阅读

相关 svg 基本配置和使用

svg文件在浏览器打开就可查看在html中使用第一种将svg文件按照src来引入使用如

迷南。/ 2021年07月24日 23:26/ 0 赞/ 611 阅读