html5 中的SVG 和canvas

想到昨天看资料的时候，发现html5 中的SVG 和canvas 都可以表示图形，那它们到底有哪些区别呢？该如何正确的使用它们呢？

1、SVG：可缩放矢量图形，（Scalable Vector Graphics），SVG使用XML格式定义图像。

canvas:<canvas> 标签定义图形，比如图表和其他图像;<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

2、<canvas> 标记和 SVG 的另外一个重要的不同点是：(VML我还没有了解过，后续会进行了解并记录)

<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG  使用一个 XML 文档来描述绘图。

这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。

例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。要从同一图形的一个 <canvas> 标记中移除元素，往往需要擦掉绘图重新绘制它。

3、svg绘制出来的每一个图形元素都是独立的DOM节点，可方便后期绑定事件或修改，而canvas输出的是一整幅画布；

svg输出的图形是矢量的，后期可以修改参数来自由放大缩小，无失真，canvas输出标量画布，就像一张图片一样。

4、svg是一种在网页上画矢量图的方法，结构基于XML。他和canvas最大的不同，就是他的每个图形都是独立的,都具有一个“html标签”，都可以分别操作（这点和flash有点类似）

canvas画出的图形都是附在canvas区域之上，但图形都是不可操作的，如果要操作图形，就是直接操作整个canvas，即清空canvas和重绘。

 

下面是最后整理出的结果哦；

canvas和svg的共同点：

1、都是HTML5的新标签；

2、都可以用css和js进行操作；

3、浏览器对它们的支持度还不是很高；

canvas和svg的区别：

1、SVG的图形被称为矢量图，canvas的图形被称为位图；

2、SVG的每个图形都是独立的标签，可以进行独立操作，canvas元素只有一个标签，里面的所有图形为一个整体，如果要对canvas图像进行操作，只能清除掉在重绘；

3、SVG话200个圆，页面中就可能有200个标签，而canvas画200个圆，页面中就还是只有一个canvas元素；

4、SVG图形可以夹带文本，seo(搜索引擎)能很好的搜索到相关信息，seo是搜索不到canvas的。

 

那么两种标签都基本能达到我们想要的结果，在这种情况下我们该如何判断使用哪种标签呢？

svg 使用：

svg由于是矢量图，所以他对点线面这样的图形很擅长，他完全可以用来实现一个web的Excel图形报表。

svg跨PC和移动端

svg不擅长做复杂的动画，因为它的动画牵扯的元素太多了——牵一发而动全身,同时动画N个元素的效率是不会高的

特别要注意，svg不能实现太复杂的效果，只要他的标签一多，效率就急剧下降

canvas使用：

canvas虽然每次动画都要重绘画布，但他效率尚可，可以制作不是十分复杂的动画效果，游戏，与audio标签等结合，可以做出不错的游戏。

canvas之所以擅长动画，是因为他会清空画布，不会造成元素累积过多卡死浏览器

它跨PC和移动平台，毫无压力

注意：canvas的绘图过程必须讲究技巧，不然还是很可能卡死浏览器。

 

写完这个，我自己对这两个标签有了一定的了解，也希望看到这篇博客的朋友能对这两个标签有新的认识哦，我是新手，还需加油(●'◡'●)。