Canvas和SVG的區別

Canvas和SVG是html5支持的兩種可視化技術。基於這兩種技術，誕生了不少可視化工具。

Echarts是基於Canvas技術的可視化工具，底層封裝了原生的JavaScript的繪圖 API。咱們很容易聯想到另外一個一樣很優秀的web前端可視化庫D3，D3是也最流行的可視化庫之一，它被不少其餘的表格插件所使用。D3底層基於SVG技術，與Canvas徹底不同，SVG的本質是一個XML 文檔。

這兩種方式在功能上是等同的，任何一種均可以用另外一種來模擬。它們都是有效的圖形工具，可用來快速建立在網頁中顯示的輕型圖形；它們都使用 JavaScript 和 HTML；它們都遵照萬維網聯合會 (W3C) 標準。

Canvas和SVG都容許您在瀏覽器中建立圖形，可是它們在根本上是不一樣的。它們很不相同，他們各有強項和弱點。

Canvas 經過JavaScript來繪製2D圖形。Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪製完成，它就不會繼續獲得瀏覽器的關注。若是其位置發生變化，那麼整個場景也須要從新繪製，包括任何或許已被圖形覆蓋的對象。

SVG 是一種使用 XML 描述 2D 圖形的語言。SVG 基於 XML，這意味着 SVG DOM 中的每一個元素都是可用的。您能夠爲某個元素附加 JavaScript 事件處理器。在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。
這兩種技術之間的主要區別是：

 Canvas 是基於像素的即時模式圖形系統，最適合較小的表面或較大數量的對象，Canvas不支持鼠標鍵盤等事件。

 SVG 是基於形狀的保留模式圖形系統，更加適合較大的表面或較小數量的對象。Canvas和SVG在修改方式上還存在着不一樣。繪製Canvas對象後，不能使用腳本和 CSS 對它進行修改。由於 SVG 對象是文檔對象模型的一部分，因此能夠隨時使用腳本和 CSS 修改它們。
如今對兩種技術作對比概括以下：
Canvas

1)依賴分辨率

2)不支持事件處理器

3)弱的文本渲染能力

4)可以以 .png 或 .jpg 格式保存結果圖像

5)最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
SVG

1)不依賴分辨率

2)支持事件處理器

3)最適合帶有大型渲染區域的應用程序（好比谷歌地圖）

4)複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）

5)不適合遊戲應用

以上對Echarts底層技術（Canvas）結合同類技術（SVG）作了簡單的對比介紹，儘管從應用層的開發來講，咱們能夠不去關注原理，但我一直相信，瞭解技術的本質，更加有利於咱們開發出強大且優秀的應用。