先介绍一下矢量图的概念： [矢量图](http://baike.baidu.com/view/138039.htm)使用[直线](http://baike.baidu.com/view/15102.htm)和[曲线](http://baike.baidu.com/view/400.htm)来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和[弧线](http://baike.baidu.com/view/4369577.htm)等等，它们都是通过[数学](http://baike.baidu.com/view/1284.htm)公式计算获得的。例如一幅花的[矢量图](http://baike.baidu.com/view/138039.htm)形实际上是由线段形成外框[轮廓](http://baike.baidu.com/view/229957.htm)，由外框的[颜色](http://baike.baidu.com/view/19878.htm)以及外框所封闭的颜色决定花显示出的颜色。 SVG,VML, HTML5 Canvas  这三个技术绘制的都是矢量图。 只是由不同的厂商开发出来的。 要达成的效果基本是一样的。 **1. VML** 全称Vector Markup Language(矢量可标记语言)。 是微软1999年9月附带IE5.0发布的。 浏览器支持： 　　Internet Explorer 5++  -- Internet Explorer 8 IE9 以后就支持SVG了。 IE10  就已经把VML作为过时的技术来看待了。 [http://msdn.microsoft.com/zh-cn/library/ie/hh801223(v=vs.85).aspx](http://msdn.microsoft.com/zh-cn/library/ie/hh801223(v=vs.85).aspx) **2. SVG** 全称Scalable Vector Graphics(可缩放矢量图形)， 是基于xml,用于描述二维矢量图形的一种图形格式。 在 2003 年一月，SVG 1.1 被确立为 W3C 标准。　　参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。 浏览器支持： 　　Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。 **3.  HTML5 Canvas** HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 浏览器支持 最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。 **总结** 所以在要在 browser 显示图形， 对于不同的浏览器使用的技术不同。 使用VML绘制图形， 速度是比较慢的。 基本上50个节点加上一些关联页面就会比较钝了。 VML会逐渐的退出。 但是目前IE8 及以下版本的IE浏览器的使用量还是很高。所以必须要兼顾。 HTML5 的标准尚未完全制定， 前途如何尚不可知。浏览器的支持方面也有一些问题。 目前来看，SVG看上去是主流。 不过针对图形绘制方面， 已有很多js library 可以使用， 这些  library已经处理了各浏览器的兼容问题。解决办法就是对于不同的浏览器及版本使用不同的技术绘制。只是对于我们之间使用这些library 来说， 就不再需要关注浏览器兼容的问题了。 比较好的library 有： raphael(微软较推荐的) , google web toolkit, yui