svg：是繪製矢量圖的html5標籤，只要定義好xml屬性就能獲取圖像元素，html5中設置了以下幾種xml元line（線條），polyline（由多條線構成的圖形）rect（矩形）circle（圓）ellipse（橢圓），polygon（多邊形），path（支持任意路徑的定義）其中還有許多效果包括過濾，投影，漸變等等。除了基本形狀，還可以使用 SVG 生成文本
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red">I love SVG</text> </svg>可以沿多個軸，以及甚至沿多條路徑顯示文本svg具體參數及應用可以參考：
http://www.ibm.com/developerworks/cn/web/wa-scalable/index.html
畫布：HTML5引入了畫布Canvas。Canvas元素是爲了客戶端點陣圖形而設計的，它本身沒有繪圖能力，但卻把一個繪圖API展現給客戶端JavaScript以使腳本能夠把想繪製的東西都繪製到一塊畫布上。canvas擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。我們在Canvas區域中繪製圖形，並不是拿鼠標在Canvas中畫畫。事實上Canvas元素只是一塊無色透明的區域，就像一個只有寬度高度沒有背景的DIV一樣，需要使用JavaScript腳本在其中繪畫。
以下是個人分析的svg與畫布的區別
svg：
- 通過xml屬性生成圖片
- svg格式的文件，並且在不同分辨率下不影響瀏覽效果.SVG 圖像的源文件是一個文本文件，所以它既具有易於訪問和搜索引擎。
- 支持事件處理
畫布：
- 依賴js生成圖片
- 生成圖片格式的圖片文件,圖片的瀏覽受分辨率的影響
- 不支持事件處理