SVG vs. Canvas

眾所周知地, Flash 是一個 loading 很重的繪圖插件, 那麼在瀏覽器裡面內建的繪圖方式又是什麼呢? 大概就是 SVG 或是 Canvas 這樣的東西吧!

SVG (Scalable Vector Graphics), 顧名思義, 它是與影像解析度無關的向量繪圖. 它嚴格遵循 XML 的語法, 所以可以放在 XML 裡面. ".SVG" 是一個可操控的文字檔, 功能有點像是 Flash 的 ".swf'". 在 SVG 檔之中, 可以用 ECMAScript  (Javascript 的一種) 或是 SMIL (Synchronized Multimedia Integration Language) 指令來控制 SVG 的物件, 讓它產生動畫的效果. 而它的又支援文字索引 (index), 方便於根據內容來搜尋所需要的圖檔.

相對於 W3C 所推廣的 SVG 開放標準, Apple 有另外一套 Canvas 相容於 HTML5, 並使用 Javascript 來控制動畫. 包括較早期的 Mozilla, FireFox, 後來的 Opera, Chrome. 甚至於即將出台的 IE9, 也在 2010/6/23 把 HTML5 和 Canvas 加進測試版, 取代(?) 過去所支持的 VML. 在打手眾多的情況下, 看來 Canvas 會比起 SVG 更有明星架勢.


[ref]

1.  SVG 摘要與範例

2.  Canvas 簡單範例

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

%d 位部落客按了讚: