html向量圖 SVG VML 介紹
阿新 • • 發佈：2019-02-05
實現方式：程式碼及相關文字解釋。
最近web專案需要一些流程圖的支援，於是研究了一下這部分東西，覺得很好玩，分享給大家。由於內容比較多而且涉及到很多細節的東西，所以我可能得分很多篇來介紹，這節就介紹一些基礎知識。
向量圖形：也稱為面向物件的影象或繪圖影象，在數學上定義為一系列由線連線的點。向量檔案中的圖形元素稱為物件，每個物件都是一個自成一體的實體，它具有顏色、形狀、輪廓、大小和螢幕位置等屬性。
優點：由於向量圖形可通過公式計算獲得，所以向量圖形檔案體積一般較小。向量圖形最大的優點是無論放大、縮小或旋轉等不會失真。
HTML裡面的向量圖：最早引用的應該是微軟於1999年9月附帶IE5.0釋出的。可能是方便word和html互相轉換，為解析word中的圖形而產生的。後來W3C於2001年9月4日釋出SVG 1.0 也開始支援html中的向量圖形。
HTML中向量圖形的優點：
2，文字獨立，沒有任何字型或其他限制，你編輯的時候什麼樣子，解析的就是什麼樣子的。
3，向量檔案比那些GIF和JPEG格式的檔案要小很多，因而下載也很快。
HTML裡面的向量圖用途很廣，特別是流程圖，報表，地圖等，但是由於技術限制可能沒我們想象的多，現在更多的可能是flash。
限制：1，由於是使用 XML 來描述二維圖形和繪圖程式的語言，所以嵌入方式有一定的限制，以svg為例，vml也是類似的。
第一，使用 < embed > 標籤但是不是合法的XHTML；
SVG：
VML：VML的全稱是Vector Markup Language(向量可標記語言) 微軟專用目前支援ie5-8。
好訊息：對於上面的限制，關於第一條，使用 < svg > …… < /svg > 。目前的主流瀏覽器（firefox、chrome、IE9等）可以在網頁中直接插入svg內容了，看下面的例子吧。
如果你實在著急用的話，我這裡有一個很好的相容方式，這是國外的一個相容的類庫，很強大哦。
http://raphaeljs.com/
最近web專案需要一些流程圖的支援，於是研究了一下這部分東西，覺得很好玩，分享給大家。由於內容比較多而且涉及到很多細節的東西，所以我可能得分很多篇來介紹，這節就介紹一些基礎知識。
向量圖形：也稱為面向物件的影象或繪圖影象，在數學上定義為一系列由線連線的點。向量檔案中的圖形元素稱為物件，每個物件都是一個自成一體的實體，它具有顏色、形狀、輪廓、大小和螢幕位置等屬性。
優點：由於向量圖形可通過公式計算獲得，所以向量圖形檔案體積一般較小。向量圖形最大的優點是無論放大、縮小或旋轉等不會失真。
HTML裡面的向量圖：最早引用的應該是微軟於1999年9月附帶IE5.0釋出的。可能是方便word和html互相轉換，為解析word中的圖形而產生的。後來W3C於2001年9月4日釋出SVG 1.0 也開始支援html中的向量圖形。
HTML中向量圖形的優點：
2，文字獨立，沒有任何字型或其他限制，你編輯的時候什麼樣子，解析的就是什麼樣子的。
3，向量檔案比那些GIF和JPEG格式的檔案要小很多，因而下載也很快。
HTML裡面的向量圖用途很廣，特別是流程圖，報表，地圖等，但是由於技術限制可能沒我們想象的多，現在更多的可能是flash。
限制：1，由於是使用 XML 來描述二維圖形和繪圖程式的語言，所以嵌入方式有一定的限制，以svg為例，vml也是類似的。
第一，使用 < embed > 標籤但是不是合法的XHTML；
第二，使用 < object > 標籤。這種情況下不能使用指令碼。< embed src="example.svg" width="300" height="300" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" / >
< object data="example.svg" width="300" height="300" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" / >< iframe src="example.svg" width="300" height="300" > < /iframe > SVG：
VML：VML的全稱是Vector Markup Language(向量可標記語言) 微軟專用目前支援ie5-8。
好訊息：對於上面的限制，關於第一條，使用 < svg > …… < /svg > 。目前的主流瀏覽器（firefox、chrome、IE9等）可以在網頁中直接插入svg內容了，看下面的例子吧。
<!DOCTYPE html>
<head>
<title> SVG </title>
<meta charset="utf-8" />
</head>
<body>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg" >
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>VML</title>
</head>
<body>
<div class="memo" style="width:700;line-height:23px">
<v:textbox id="memo" style="font-size:10pt;color:blue;line-height:18px" inset="1,1,1,1">Hello world!<br>Hello VML!</v:textbox>
</div>
</body>
</html>如果你實在著急用的話，我這裡有一個很好的相容方式，這是國外的一個相容的類庫，很強大哦。
http://raphaeljs.com/