canvas 与 svg

canvas

canvas 是 HTML 5 新出的图片元素，它是 2d 绘图 API， 使用 JavaScript 调用API 可以画 lines, shapes, images, text 甚至其他你想话的， 并且不需要什么插件。

它是作为一个画布存在在网页中， 画布上有你绘制的图案，利用 js 你可以实时的改变画布上的图案，以实现动画。

它的支持性也挺好，IE 9 开始支持，Chrome和Opera 9+ 也支持。

svg

SVG 可缩放矢量图形， 是 XML 用来描述二维图形和绘图程序的语言。目前SVG在Firefox、Opera、Webkit浏览器、IE等浏览器中已经部分实现。

什么是 XML
它是一种类似于 HTML 的标记语言，设计宗旨在于传输数据而不是显示数据。
XML 数据以纯文本格式进行存储，因此提供了一种独立于软件和硬件的数据存储方法。通过读取你可以获取存储于其中的数据

SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以变形，可以合成，还可以通过滤镜完全改变外观。

SVG提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线，以及其他形状。
一个简单的SVG文档由 <svg> 根元素和基本的形状元素构成。另外还有一个g元素，它用来把若干个基本形状编成一个组。

eg:

<svg version="1.1"
     baseProfile="full"
     width