最近一直在研究浏览器端的图形图表绘制技术，从种类上可以分为两种：

一类是矢量图形绘制API，典型代表是微软的VML与W3C主推的SVG

另外一类是基于像素的绘制API，典型代表是HTML5 Canvas

背景介绍：

VML是微软推出的基于IE的矢量图形绘制API，注意VML只能在IE中支持，而SVG是W3C

推出的矢量图型API，显然IE不待见它，所以只能在非IE的浏览器上支持，IE上要想显示

SVG格式的图形，必须额外安装插件。

HTML5 Canvas是W3C推出的新一代浏览器端绘图API，微软从IE9+开始支持HTML5

Canvas渲染技术，其它主流浏览器都支持该技术。

技术优缺点：

VML是基于XML方式来组织绘制对象，支持相对与绝对定位方式，同时支持group元素，

可以将一组元素对象绘制在一个group元素上，group上默认支持绝对定位方式绘制图形

VML技术绘制的图形每个都是元素对象，可以任意添加鼠标监听事件，而且每个元素对

象内置支持tooltip功能，但是VML本身不支持动画。不支持单独的文字绘制，文字绘制

必须依附其它顶级的VML 元素。同时微软在IE8时候的改动，导致VML在不同的IE浏览

器版本上使用略有不同。一个最常用的支持VML调用JavaScript脚本如下：

var e=["shape","shapetype","group","background","path","formulas",

"handles","fill","stroke","shadow","textbox","textpath","imagedata","line",

"polyline","curve","roundrect","oval","rect","arc","image"],

s=document.createStyleSheet();

for(var i=0; i<e.length;i++) {

s.addRule("v\\:"+e[i],"behavior: url(#default#VML);");}

document.namespaces.add("v","urn:schemas-microsoft-com:vml");

}

VML支持2D与3D渲染技术，可以绘制出效果非常好的图行。当前支持VML技术绘制的

开源的前端图表库有很多，可能大家最熟悉就是JQuery的图表库与Highchart的图表库

SVG技术与VML技术都是提供矢量图形绘制元素，绘制图形上每个元素都支持鼠标监听

SVG比VML做的好地方就是文本绘制，直接支持文本对象，不得不说VML的文本绘制太