先介紹一下矢量圖的概念：
矢量圖使用直線和曲線來描述圖形，這些圖形的元素是一些點、線、矩形、多邊形、圓和弧線等等，它們都是通過數學公式計算獲得的。例如一幅花的矢量圖形實際上是由線段形成外框輪廓，由外框的顏色以及外框所封閉的顏色決定花顯示出的顏色。
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
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 來說， 就不再需要關注浏覽器兼容的問題了。
