svg流程設計器跨瀏覽器的首選

以前在ie盛行，微軟一家獨大的時候，web繪圖功能首選就是vml，ie5.0以上的版本都支援vml，vml可以在ie中通過文字的方式繪製向量影象，類似在html頁面中實現了畫筆的功能，所以被很多人採用來實現web流程設計器。

隨著手機，ipad等各種移動裝置的公升級，越來越多的應用要求支援這些移動裝置。很可惜vml只支援ie，手機和ipad大部分是chrome和safari，不支援vml，web繪製流程圖的功能，要實現跨瀏覽器，必須採用別的技術。

為了相容已經用vml做好的繪圖功能，並且相容用ie的客戶，所以我們在實現web流程設計器的繪圖功能時，需要根據瀏覽器來切換，當ie瀏覽器時，我們用vml來繪圖，當其他瀏覽器時，用svg來繪圖，做到自動切換，讓使用者感覺不到不同，這是最好的。

vml和svg的區別：

vml的優點：

xml標準，文字標記，表示方法簡單。

高質量的向量影象，支援多種不同的向量圖形元素：

shape

line

polyline

path

curve

rect

roundrect

group

oval

arc可以方便的嵌入html檔案。

相容dhtml的大部分屬性和事件。如，id,title,onmouseover等等，還可以自定義屬性。

支援動畫和互動

svg支援任意的幾何圖形，漸變色，濾鏡，動畫等。並且，vml有的那些有點，svg也有，如

基於xml標準

高質量的向量影象

文字描述的二維影象

另外，svg比vml還有一些優點

靈活的檔案格式

支援互動和動畫

支援字元查詢

支援xlink和xpointer

利用vml和svg的相同和不同，我們在繪製流程圖的時候，根據瀏覽器的不同，切換到不同的技術。如ie中，我們用vml來劃線：

同乙個流程，safari中繪製的流程圖：

線條的粗細稍有不同，位置形狀完全一致，自動切換，終端使用者使用中感覺不到差異。