作為一名前端攻城獅，Canvas 和 SVG 對於我們並不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的時間要比 canvas 長很多，svg 並不屬於 html，最初的 svg 是由 XML 定義的，在 html 5 中 canvas 與 svg 看著相似，其實不同。

一、基本介紹

Canvas

• 通過 js 來繪製 2D圖形。
• canvas 影象單位是畫素。
• canvas 影象繪製完畢之後，瀏覽器將不再關注它，如果位置發生變換，就需要重新繪製。

SVG

• svg 使用 XML 描述的2D影象。
• svg 是基於 xml 的，所以 svg 中繪製圖形還是使用的元素，js 給元素任意新增事件。
• svg 繪製的影象是一個物件，如果物件的屬性發生改變，瀏覽器將重新繪製圖形。

二、SVG與Canvas比較

1. svg 是一種向量圖，而 canvas 依賴於解析度。所以 svg 放大不會失真，但是 canvas 繪製的圖形會失真。
2. svg 支援事件處理器，而 canvas 不支援事件處理器。
3. svg 中的文字獨立於影象，文字可保留，可編輯和可搜尋，canvas 的文字渲染能力弱。
4. canvas 適合影象密集型的遊戲，頻繁地重繪影象，svg 繪製的複雜度高時減慢渲染的速度。
5. canvas 繪製的圖形可以多種格式 (jpg、png) 儲存圖片，但是 svg 繪製的只能以 .svg 格式儲存，使用時可以引入 html 檔案。
6. canvas 適合開發遊戲，svg 不適合遊戲應用。

三、如何應用

2.1、功能上來說

canvas 是一個畫布，繪製出來的圖形是點陣圖，因此 canvas 可以繪製圖片，在實際應用中，由於渲染效能高，所以大型遊戲開發都用的 canvas 。除此之外，還有統計中常見的柱狀圖、餅圖、雷達圖等也使用的 canvas 。而 svg 繪製的是向量圖，放大後不會失真，所以很適合做地圖。

2.2、操作方面講

canvas 繪製的圖形，只能給 canvas 整個畫布新增事件，而不能給某個圖形或檔案新增事件處理器，但是 svg 支援事件繫結，如果需要新增帶有事件的動畫效果時，就需要選擇 svg。