HTML5 內嵌 SVG
SVG可縮放向量圖形（Scalable Vector Graphics）是基於可擴展標記語言（XML），用於描述二維向量圖形的一種圖形格式。 SVG是W3C制定的一種新的二維向量圖形格式，也是規範中的網路向量圖形標準。 SVG嚴格遵循XML語法，並以文字格式的描述性語言來描述影像內容，因此是一種和影像解析度無關的向量圖形格式。
什麼是SVG？
SVG 指可伸縮向量圖(Scalable Vector Graphics)
SVG 用來定義用於網路的基於向量的圖形
SVG 使用XML 格式定義圖形
SVG 影像在放大或改變尺寸的情況下其圖形品質不會有所損失
SVG 是萬維網聯盟的標準
SVG 與諸如DOM 和XSL 之類的W3C 標準是一個整體
SVG優勢
與其他影像格式相比（例如JPEG 和GIF），使用SVG 的優勢在於：
SVG 影像可透過文字編輯器來建立和修改
SVG 影像可被搜尋、索引、腳本化或壓縮
SVG 是可伸縮的
SVG 影像可在任何的解析度下被高品質地列印
SVG 可在影像品質不下降的情況下被放大
基本上所有的瀏覽器都支援SVG 當然IE從9以上。
實例：
#<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SVG</title> </head> <body> <svg width="100%" height="100%" > <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="black" /> </svg> </body> </html>
Canvas 與SVG 的差異：
SVG
SVG 是一種使用XML描述2D 圖形的語言。
SVG 是基於 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪製的圖形被視為物件。如果 SVG 物件的屬性發生變化，那麼瀏覽器能夠自動重現圖形。
特點：
不依賴解析度
不依賴解析度
都大 複雜度高會減慢渲染速度（任何過度使用DOM 的應用程式都不快）
不適合遊戲應用
Canvas
Canvas 透過JavaScript 來繪製2D 圖形。
Canvas 是逐像素進行渲染的。
在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的物件。
特性：
依賴解析度
不支援事件處理器 # 不支援事件處理器 # 或.jpg 格式儲存結果圖片
最適合圖片密集的遊戲，其中的許多物件會被頻繁重繪
