HTML5：Canvas 和 SVG 有何不同？

Canvas 和 SVG 都可以在瀏覽器中建立圖形，以下大概介紹2者的特性：




SVG
SVG是一個用來使用XML來描述2D圖形的程式碼。

SVG基於XML，這意味著每一個元素在SVG DOM中都是存在。你可以使用javascript來處理其中的元素。

在SVG中，每一個繪出的圖形都被保存成一個對象。如果一個SVG的對象屬性變化了，瀏覽器會自動的重新渲染圖形形狀。

• Resolution independent（獨立的原始碼）
• Support for event handlers（可以支援事件）
• Best suited for applications with large rendering areas (Google Maps)（簡單的圖形變大是最適合的）
• Slow rendering if complex (anything that uses the DOM a lot will be slow)（想也知道太複雜的code當然會跑不動）
• Not suited for game applications（不適合用在遊戲應用）

Canvas
Canvas可以快速的開發2D圖形（使用javascript）。

Canvas使用像素來渲染圖形。

在Canvas中，一旦圖形被繪制好了，就會被瀏覽器忽略。它的位置可以被移動，但是需要重新被繪制，包括任何圖形包含的對象都需要被重新繪制。

• Resolution dependent（亂七八糟的原始碼都在一起）
• No support for event handlers（不支援事件）
• Poor text rendering capabilities（太大就不行了）
• You can save the resulting image as .png or .jpg（可以另存，這點是最棒的）
• Best suited for graphic-intensive games where many objects are redrawn frequently（適合用在遊戲及複雜又多的圖形）