HTML5 的 SVG 和 Canvas

SVG (Scalable Vector Graphics) 和 Canvas, 同樣是 HTML5 的標準內容, 但兩者似乎有相互競爭的意味。主要的差異在於, SVG 是以 tag 的方式存在 (DOM 的一部份), 而 Canvas 純粹是用 JavaScript 來建立。

粗略來說, 當圖案越複雜時, SVG 會越龐大, render 的速度會越慢; Canvas 則是看變動區域的大小和複雜程度。

2012 年中, 就有針對 SVG 和 Canvas 效能問題做測試和討論 The Road to HTML5: SVG, Canvas, and faster performance。結論是 Canvas 效能比 SVG 要來得好, 但比較不好寫 (應該說 JS 要寫較多的行數)。

也有一派認為 SVG 的優點比較多, 他們偏好使用 SVG, 7 Reasons to Consider SVGs Instead of Canvas 。簡述一下文中條列的 SVG 優點:

• SVG 是可縮放的
• 有現成的編輯工具: 如免費的 Inkscape , 椅拉也有支援
• 程式語言/框架的支援: 文中其實只提 Simple XML, 意義是後端可以做些處理
• 大部份的瀏覽器都有支援: 以 Raphaël 為例
• 可得性與 SEO 佳
• DOM 操作
• 有 CSS, webfont, JS 支援

上列的林林總總, 好像 SVG 真的比 Canvas 好。其實也是得看用途, 在 2D 網站最佳化的過程, 會因種種特性, 兩者選其一, 亦或兩者都用。

另外, 如何開始, 啃官方文件一定不會是您想要的。

SVG 有老牌的 Raphaël, 也有同一個作者開發的 Snap.svg (感覺是 adobe 支持的專案), Snap 的 Getting started 是不錯的開始。

Canvas 的話, KineticJS 是頗為熱門的 framework。

以上。

阿豆皮 ! 我要 Flash/AS3 直接轉 Canvas 的功能 ! (等到鬍渣滿面...)