先介紹一下矢量圖的概念： [矢量圖](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