HTML5之圖形繪製技術（Canvas Vs SVG）

HTML5中的2D圖形繪製技術

Canvas和SVG是HTML5中主要的2D圖形技術，前者提供畫布標籤和繪製API，後者是一整套獨立的矢量圖形語言，成爲W3C標準已經有十多年(2003.1至今)，總的來講，Canvas技術較新，從很小衆發展到普遍接受，注重柵格圖像處理，SVG則歷史悠久，很早就成爲國際標準，複雜，發展緩慢（Adobe SVG Viewer近十年沒有大的更新）

Canvas vs SVG

<canvas>和<svg>都是HTML5推薦使用的圖形技術，Canvas基於像素，提供2D繪製函數，是一種HTML元素類型，依賴於HTML，只能經過腳本繪製圖形；SVG爲矢量，提供一系列圖形元素（Rect, Path, Circle, Line ...），還有完整的動畫，事件機制，自己就能獨立使用，也能夠嵌入到HTML中，SVG很早就成爲了國際標準，目前的穩定版本是1.1 - http://www.w3.org/TR/SVG/，二者的主要特色見下面的表格：

SVG與Canvas主要特色

根據二者的不一樣特色，Canvas和SVG有各自的適用範圍

Canvas適用場景

Canvas提供的功能更原始，適合像素處理，動態渲染和大數據量繪製

SVG適用場景

SVG功能更完善，適合靜態圖片展現，高保真文檔查看和打印的應用場景