矢量圖概念
矢量圖用數學公式描述點、線、面（矩形、多邊形、圓、弧），通過幾何屬性而非像素定義圖形，縮放不失真。
SVG、VML、Canvas 均繪製矢量圖，差異在於實現標準、瀏覽器支持與編程模型。
三大技術詳細對比
1. VML (Vector Markup Language)
- 發布：微軟 1999 年隨 IE 5.0 發布
- 支持：IE 5 ~ IE 8
- 現狀：IE9+ 改支持 SVG，IE10 視為過時技術
- 性能：較差，節點超 50 頁面明顯卡頓
2. SVG (Scalable Vector Graphics)
- 標準：W3C，2003 年 SVG 1.1 成為推薦標準
- 參與者：Sun、Adobe、Apple、IBM、Kodak 等
- 支持：IE 9+、Firefox、Chrome、Opera、Safari 全支持內聯 SVG
- 特點：XML 基礎，DOM 節點可事件綁定、CSS 樣式、腳本操作
3. HTML5 Canvas
- 模型：位圖畫布，通過 JavaScript 繪製路徑、矩形、圓、文本、圖片
- 特點：即時模式，繪製後不保留對象模型，需自行管理場景圖
- 支持：現代瀏覽器（Safari、Chrome、Firefox、Opera、IE9+）部分特性
總結與選型建議
| 場景 | 推薦技術 | 理由 |
|---|
| 需兼容 IE6-IE8 | VML (或使用 Raphaël 等兼容庫) | 舊 IE 僅支持 VML |
| 現代瀏覽器、需 DOM 交互、動畫、無障礙 | SVG | 標準化、DOM 化、生態成熟 |
| 高性能像素級動畫、遊戲、大數據點繪製 | Canvas | 即時模式、GPU 加速友好 |
| 通用圖表開發 | 成熟圖表庫 (ECharts, Highcharts, D3 等) | 內部已封裝兼容層，開發效率最高 |
實際建議
- 新項目優先選 SVG 為底層（或直接用基於 SVG 的圖表庫）。
- 如需極高性能（萬級節點實時動畫），考慮 Canvas/WebGL。
- VML 僅作為舊 IE 降級方案，現代庫（如 Raphaël、ECharts 2.x）已自動處理。
- HTML5 標準演進中，Canvas 2D Context API 已相對穩定，可放心使用。
