它們都是HTML5中支援的2D圖形展示技術，而且均支援向量圖形。現在，我們就來比對一下這兩種技術，分析一下它們的長處和適用場景。
首先分析一下兩種技術的顯著特點，看下面的表格：
CanvasSVG基於畫素（動態 .png）基於形狀單個 HTML 元素多個圖形元素，這些元素成為 DOM 的一部分僅通過指令碼修改通過指令碼和 CSS 修改事件模型/使用者互動顆粒化 (x,y)事件模型/使用者互動抽象化 (rect, path)圖面較小時、物件數量較大 (>10k)（或同時滿足這二者）時效能更佳物件數量較小 (<10k)、圖面更大（或同時滿足這二者）時效能更佳從上面的對比中可以看出：Canvas在畫素操作方面有著強大的優勢；而SVG的最大優勢在於便捷的互動性和可操作性。使用Canvas受畫布的尺寸(其實就是畫素數目)影響很大，使用SVG受物件的數目(元素的數目)影響比較大。Canvas 和 SVG 在修改方式上還存在著不同。繪製 Canvas物件後，不能使用指令碼和 CSS 對它進行修改。而 SVG 物件是文件物件模型的一部分，所以可以隨時使用指令碼和 CSS 修改它們。
實際上Canvas 是基於畫素的即時模式圖形系統，繪製完物件後不儲存物件到記憶體中，當再次需要這個物件時想，需要重新繪製；SVG是基於形狀的保留模式圖形系統，繪製完物件後會將其儲存在記憶體中，當需要修改這個物件資訊時，直接修改就可以了。這種根本的區別導致了很多應用場景的不同。
評論(4)