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）做了簡單的對比介紹，盡管從應用層的開發來說，我們可以不去關注原理，但我一直相信，了解技術的本質，更加有利於我們開發出強大且優秀的應用。