html5画布 svg,html5画布和svg

svg：是绘制矢量图的html5标签，只要定义好xml属性就能获取图像元素，html5中设置了以下几种xml元line(线条)，polyline(由多条线构成的图形)rect(矩形)circle(圆)ellipse(椭圆)，polygon(多边形)，path(支持任意路径的定义)其中还有许多效果包括过滤，投影，渐变等等。除了基本形状，还可以使用 SVG 生成文本

I love SVG可以沿多个轴，以及甚至沿多条路径显示文本svg具体参数及应用可以参考：

http://www.ibm.com/developerworks/cn/web/wa-scalable/index.html

画布：HTML5引入了画布Canvas。Canvas元素是为了客户端点阵图形而设计的，它本身没有绘图能力，但却把一个绘图API展现给客户端JavaScript以使脚本能够把想绘制的东西都绘制到一块画布上。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们在Canvas区域中绘制图形，并不是拿鼠标在Canvas中画画。事实上Canvas元素只是一块无色透明的区域，就像一个只有宽度高度没有背景的DIV一样，需要使用JavaScript脚本在其中绘画。

以下是个人分析的svg与画布的区别

svg：

通过xml属性生成图片

svg格式的文件，并且在不同分辨率下不影响浏览效果.SVG 图像的源文件是一个文本文件，所以它既具有易于访问和搜索引擎。

支持事件处理

画布：

依赖js生成图片

生成图片格式的图片文件,图片的浏览受分辨率的影响

不支持事件处理