CANVAS是html5提供的新元素<canvas>，而svg存在的歷史要比canvas久遠，svg並不是html5專有的標簽，最初svg是用xml技術（超文本擴展語言，可以自定義標簽或屬性）描述二維圖形的語言。在H5中看似canvas與svg很像，但是，他們有巨大的差別。
CANVAS
- Canvas 是通過 JavaScript 來繪制 2D 圖形。
- Canvas 是逐像素進行渲染的。
- 在Canvas中，一旦圖形被繪制完成，他就不會繼續得到瀏覽器的關注，如果他的位置發生變化，那么就需要重新來繪制圖形，其中包括任何或已經被圖形覆蓋的對象。
SVG
- Svg 是使用 XML 描述的 2D 圖形。
- Svg 是基於 XML 的，這也就是說 SVG DOM 中的每個元素都是可用的。可以為某個元素附加 JavaScript 事件處理器。
- 在 SVG 中，每個被繪制過的圖形均視為對象，如果 SVG 對象的屬性發生變化，那么瀏覽器可以自行重現圖形。
比較
Canvas
- 依賴分辨率
- 不支持事件處理器
- 文本渲染力弱
- 能夠以 .png 或 .jpg 的格式保存結果圖形
- 最合適圖像密集型的游戲，其中許多的對象會被頻繁的重繪
SVG
- 不依賴分辨率
- 支持事件處理器
- 最合適帶有大型渲染區域的應用程序（如，百度地圖、谷歌地圖等等）
- 不適合游戲的應用
- 復雜度高會減慢渲染的速度
- 以單個文件的形式獨立存在，后綴名為.svg，可以在html文件中以img標簽的src，元素背景，框架等引入 或者 直接在html文件中引入SVG標簽
從功能上來說
CANVAS可以看做是一個畫布。，其繪制出來的圖形為標量圖，因此，可以在canvas中引入jpg或png這類格式的圖片，在實際開發中，大型的網絡游戲都是用canvas畫布做出來的，並且canvas的技術現在已經相當的成熟。另外，我們喜歡用canvas來做一些統計用的圖表，如柱狀圖曲線圖或餅狀圖等。而svg，所繪制的圖形為矢量圖，所以其用法上受到了限制。因為只能繪制矢量圖，所以svg中不能引入普通的圖片，因為矢量圖的不會失真的效果，在項目中我們會用來做一些動態的小圖標。但是由於其本質為矢量圖，可以被無限放大而不會失真，所以就很適合來做地圖。
從操作上來說
我們要讓canvas里面的一個圖片跟隨鼠標事件：canvas.onmouseover=function(){}。而svg支持事件的綁定。另外canvas中我們繪制圖形通常是通過javascript來實現，svg更多的是通過標簽來來實現，如在svg中繪制正矩形形就要用<rect>，這里我們不能用屬性style="width:XXX;height:XXX;"來定義。