本文主要介紹了SVG的基礎概念等知識，以及SVG與CANVAS的區別，最後給出了一個簡單示例，方便大家更好的了解SVG可縮放矢量圖形。推薦給大家。
百度百科：
SVG可縮放矢量圖形（Scalable Vector Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。 SVG是W3C制定的一種新的二維矢量圖形格式，也是規範中的網絡矢量圖形標準。 SVG嚴格遵從XML語法，並用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。
什麼是SVG？SVG 指可伸縮矢量圖形(Scalable Vector Graphics)
SVG 用來定義用於網絡的基於矢量的圖形
SVG 使用XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
SVG 是萬維網聯盟的標準
SVG 與諸如DOM 和XSL 之類的W3C 標準是一個整體
Canvas 和SVG 的區別：SVG
SVG 是一種使用XML 描述2D 圖形的語言。
SVG 基於XML，這意味著SVG DOM 中的每個元素都是可用的。您可以為某個元素附加JavaScript 事件處理器。
在SVG 中，每個被繪製的圖形均被視為對象。如果SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。
特點：
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區域的應用程序（比如穀歌地圖）
複雜度高會減慢渲染速度（任何過度使用DOM 的應用都不快）
不適合遊戲應用
Canvas
Canvas 通過JavaScript 來繪製2D 圖形。
Canvas 是逐像素進行渲染的。
在canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。
特點：
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以.png 或.jpg 格式保存結果圖像
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
svg 例子：複製代碼