瀏覽器端圖表渲染技術SVG, VML HTML Canvas

最近一直在研究瀏覽器端的圖形圖表繪制技術，從種類上可以分為兩種：

一類是矢量圖形繪制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的文本繪制太

TMD的變態。SVG也是基于XML文本描述的，這點跟VML非常相似。值得稱贊的是SVG

的JavaScript調用非常的容易與簡潔。同樣IE6～IE8都不支持SVG渲染與顯示，解決辦

法就自己裝個adobe的SVG Viewer插件，IE9+之后版本支持SVG，所以說IE才是最坑

爹的瀏覽器，而且是在中國使用人數最多的瀏覽器，這都拜微軟捆綁銷售所賜。

HTML5 Canvas是W3C推出來用來替代SVG的前端圖形技術，Canvas是基于像素的渲

染技術實現，所以它跟SVG與VML相比，放大與縮小很麻煩，位圖大家都懂。但是

Canvas相比VML與SVG還是有很多優點，第一個廢除了每個繪制元素都是對象的做法，

浪費資源啊！支持操作圖像像素，可以支持Base64編碼，在前端就可以保存為圖像，

這個都是SVG與VML做不到的啊，Canvas借鑒編程語言圖形庫的設計思想，對有圖形

開發經驗的人掌握起來非常容易。而VML與SVG是基于XML的設計，只能通過

JavaScript來操作元素，只有對每個元素指定一個ID，你才可以獲取到它，而Canvas支

持擦除與重繪制非常的方便。

最后想瞎掰一下那些開源的前端圖表庫

名頭最嚇人的應該是Google推出的google chart開源前端圖表庫，據它自己說基于

HTML5與SVG技術，在老版本的IE上使用VML技術。

功能最強大的應該是HighChart圖表庫，官方說它們是基于SVG與VML技術，下一

個版本將融入HTML5技術

canvasXpress自己說是完全標準的HTML5技術實現的圖表庫，但是如果想在IE9之

下版本支持必須額外包括FlashCanvas 或者ExplorerCanvas,而且還說IE上面運行很

慢，建議IE上使用時安裝Google iframe框架。

RGraph自己說是完全HTML5技術實現，實際上是VML 與HTML Canvas混合實現，

支持大多數主流瀏覽器。

這些都國外的，國內淘寶有個開源的前端圖表庫，但是支持的功能實在有限，通用性

有待提高。

SVG, VML, HTML5 Canvas三種前端圖形渲染技術，沒有一種是可以支持全部瀏覽

器的，這個就給實際項目中使用帶來不變，一般都會借助開源的圖表框架實現跨瀏覽

器支持。

轉載請注明-gloomyfish