canvas與svg的區別

1.歷史：

canvas是html5提供的新元素。

而svg存在的歷史要比canvas久遠，已經有十幾年了。svg並不是html5專有的標籤，最初svg是用xml技術（超文字擴充套件語言，可以自定義標籤或屬性）描述二維圖形的語言。

2.功能：

canvas可以看做是一個畫布，其繪製出來的圖形為標量圖。可以在canvas中引入jpg或png這類格式的圖片。在實際開發中，大型的網路遊戲都是用canvas畫布做出來的，並且canvas的技術現在已經相當的成熟。另外，我們喜歡用canvas來做一些統計用的圖表，如柱狀圖曲線圖或餅狀圖等。

而svg，所繪製的圖形為向量圖，不能引入普通的圖片，因為向量圖的不會失真的特點，在專案中我們會用來做一些動態的小圖示。這個特點也很適合被用來做地圖，百度地圖就是用svg技術做出來的。

3.技術：

canvas裡面繪製的圖形不能被引擎抓取，canvas中我們繪製圖形通常是通過javascript來實現。

而svg裡面的圖形可以被引擎抓取，支援事件的繫結，svg更多的是通過標籤來實現。我再來介紹一個svg的js庫：TWO.JS。其中包含two.js和three.js前者用於繪製二維圖形，後者用於繪製三維圖形。TWO.JS可以支援三種格式，svg（預設）、canvas、和WEBGL。當然也可以在普通div中引入。