《JavaScript高效圖形程式設計（修訂版）》——6.4 畫布與SVG的對比

本節書摘來自異步社群《javascript高效圖形程式設計（修訂版）》一書中的第6章，第6.4節，作者：【美】raffaele cecco著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

有些人最初對蘋果建立另一個浏覽器圖形标準持保留意見，他們可能認為svg已經足夠了。從表面上看svg和畫布提供類似的圖形能力，但它們有一個根本的差別：svg是一個高層的、基于xml的标記語言，可以通過建立xml元素屬性來定義圖像；而畫布則提供了可以直接從javascript通路的繪圖api。

你可以使用任何文本編輯器手動建立svg xml，或将它從adobe illustrator或inkscape等繪圖軟體中導出。以下的svg例子顯示了一個藍色矩形：

要通過javascript操縱這個矩形，你需要通路a_rectangle元素并适當調整其屬性。聽起來很熟悉嗎？就像html中那樣，我們通過一個類似dom的結構去定義視覺效果。試想假如我們需要1000個矩形？沒錯，我們必須插入1000 矩形元素到xml中。這種方式對需要更多程式設計的動态圖形來說，不是特别有效或直覺。

不過，svg不用javascript就能帶給你繪制和動畫功能，而且有大量設計工具供你編輯svg圖形。由于現在ie9中也提供了基本的支援，當需要矢量圖時，svg是一個不錯的解決方案。維基百科等網站就廣泛使用svg作為插圖。