SVG 與 HTML5 的 canvas 各有什麼優點，哪個更有前途？
Canvas是使用JavaScript程序繪圖(動態生成)，SVG是使用XML文檔描述來繪圖。 從這點來看：SVG更適合用來做動態交互，而且SVG繪圖很容易編輯，只需要增加或移除相應的元素就可以了。 同時SVG是基於矢量的，所有它能夠很好的處理圖形大小的改變。Canvas是基於點陣圖的圖像，它不能夠改變大小，只能縮放顯示；所以說Canvas更適合用來實現類似於Flash能做的事情(當然現在Canvas與Flash相比還有一些不夠完善的地方)。 關於最後一點二者誰更有前途：從上面我們可以知道二者是有不同用途的，作為一個開發者，你應該做的是理解應用程序的具體需求並選擇正確的技術來實現它。
這兩種技術都搞過，幾年前寫過SVG，最近研究Canvas，兩者各有各的適用範圍：
Canvas適用場景
Canvas提供的功能更原始，適合像素處理，動態渲染和大數據量繪製
SVG適用場景
SVG功能更完善，適合靜態圖片展示，高保真文檔查看和列印的應用場景
下面的內容引自：HTML5之圖形繪製技術（Canvas Vs SVG）
Canvas和SVG是HTML5中主要的2D圖形技術，前者提供畫布標籤和繪製API，後者是一整套獨立的矢量圖形語言，成為W3C標準已經有十多年(2003.1至今)，總的來說，Canvas技術較新，從很小眾發展到廣泛接受，注重柵格圖像處理，SVG則歷史悠久，很早就成為國際標準，複雜，發展緩慢（Adobe SVG Viewer近十年沒有大的更新）
Canvas vs SVG
&
SVG與Canvas主要特點
根據兩者的不同特點，Canvas和SVG有各自的適用範圍
Canvas適用場景
Canvas提供的功能更原始，適合像素處理，動態渲染和大數據量繪製
SVG適用場景
SVG功能更完善，適合靜態圖片展示，高保真文檔查看和列印的應用場景
存在意味著合理 不如問兩者分別適合什麼場景 canvas是個像素庫 繪製完了基本不記錄過程 更快 svg建立了一大堆可交互對象 本性長於交互 但性能會弱些 但這種界限也在被一些js庫打破 如fabric.js 以及百度林峰的zRender 這些庫在canvas上構建一層mvc層 可以如svg一樣操作和交互 性能上往往比原生svg要好一些 正如此 在基於zRender的可視化庫可以繪製數萬個點 倘使用svg 早掛了。而webgl-canvas實時繪點是百萬級的 所以看你的場景 如果pc端強交互少元素 svg勝出 | pc端弱交互而強性能 用canvas | pc端超強性能 webgl-canvas | 移動端弱交互 原生canvas挺好（木有ie的世界真好） | 移動端強交互 剛才提到的一些基於canvas的庫不錯（svg性能很挫） sorry這是個設備和需求的二維表 偷懶了。 個人的經驗 有誤請拍
http://msdn.microsoft.com/zh-cn/library/ie/gg193983(v=vs.85).aspx
對於開發人員而言，最直觀的區別在於：
1.對於畫在Canvas上的部件，你需要處理重繪。而SVG則不用，你修改svg dom則系統會自動幫你重繪2.Hittest，即canvas不負責幫你偵測滑鼠/觸摸事件發生在哪一個圖形元件上；而svg可以。3.Canvas效率高得多如果還不夠直觀，可以找一些類比：canvas的工作方式就像傳統的2d圖形引擎比如GDI；而SVG的工作方式更像WPF(XAML)、HTML/CSS這類由標記控制的繪圖引擎不說優點，兩者都可以完成對方不能完成的動畫。各具優點，本人推薦使用 SVG 來做一下小 LOGO，Canvas 則主要針對比較複雜的動畫。SVG 更多可以參考：
SVG 動畫精髓
TL;DR
本文主要是講解關於 SVG 的一些高級動畫特效，比如 SVG 動畫標籤，圖形漸變，路徑動畫，線條動畫，SVG 裁剪等。
例如：路徑動畫
http://demo.icanbecreative.com/animate-along-svg-path/svg-animate-along-path-600.gif
圖形漸變：
http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/08/1407310358spinner-cropped.gif
線條動畫：
以及，相關的動畫的矩陣知識，這個也是現在 CSS 動畫裡面最重要，同時也是最為欠缺的知識點：
文章會先從基本語法入手，然後，慢慢深入。介紹一些動畫基本原理和對應的數學原理知識點。並且文章後面，還附有相關語法的介紹，當你在遇到不熟悉語法的時候可以參考參考。
前面一篇文章，主要介紹了一些 SVG 的基本概念和基本圖形。接下來我們需要了解一下，SVG 處理矢量這個特性之外，還有啥內容吸引我們，能讓 SVG 現在普及度這麼高？
完整版可以關於我的公眾號：前端小吉米。
分享吉米的前端路，後面也會定期推出當前熱門的前端技術~ 比如，直播，VR
文章詳細目錄為：
- SVG Animation
- animate morph
- animateMotion
- set
- 矩陣動畫
- 矩陣高級用法
- 線條動畫
- SVG 文字
- text-anchor
- tspan
- 在 Path 展示 text
- Clip
Canvas
- 依賴解析度
- 不支持事件處理器
- 弱的文本渲染能力
- 能夠以 .png 或 .jpg 格式保存結果圖像
- 最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
SVG
- 不依賴解析度
- 支持事件處理器
- 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
- 複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
- 不適合遊戲應用
總結來w3shool.
我是這樣理解的：瀏覽器就是一個自動化的canvas 實時渲染svg格式圖形 以canvas為基礎開發的圖表插件 也是對內部矢量圖形格式進行渲染做圖表想要折騰就用canvas簡單美觀就用svg
另外svg當然不適合做遊戲
萬一哪天 瀏覽器直接進化為3d渲染引擎 直接拖個3d格式文件進來就能看 也未嘗不可 現階段只是用canvas來做渲染引擎手機上可能還是SVG更合適一些。
我覺得SVG在"遙遠"的將來更有前途
SVG跟Canvas的關係就像幾何與美術So，你覺得哪個更有前途？
看了 @sand no 的答案我覺得Canvas與SVG的區別可能可以類比為Word和PDF的區別，場景上、功能上都應該比較形象，哈哈。
-----------------------------------------------------------------------
Canvas 和 SVG 都允許您在瀏覽器中創建圖形，但是它們在根本上是不同的。
SVG
SVG 是一種使用 XML 描述 2D 圖形的語言。
SVG 基於 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪製的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。
Canvas
Canvas 通過 JavaScript 來繪製 2D 圖形。
Canvas 是逐像素進行渲染的。
在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。
Canvas 與 SVG 的比較
下表列出了 canvas 與 SVG 之間的一些不同之處。
Canvas
- 依賴解析度
- 不支持事件處理器
- 弱的文本渲染能力
- 能夠以 .png 或 .jpg 格式保存結果圖像
- 最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
SVG
- 不依賴解析度
- 支持事件處理器
- 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
- 複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
- 不適合遊戲應用
引用自w3School
svg,圖像保真更適合網站頁面視覺傳達。
就我現在所看見的canvas的應用率要比svg高處很多 個人覺得canvas比較有前途吧
如果是只能挑一樣來學，還是建議svg，別問為什麼．
推薦閱讀：