Canvasと SVGと

Canvasって技術をGIGAZINEで知った。悔しいけど、初耳だった。
SeeNaDoomっぽいのがスムースに動くのはびっくりだ。border特性で実現したなんちゃって3Dなんかとは違う。

ただ、こういうのって本来 SVGの領域じゃなかったのか? 自由に領域を確保してそこに線やら多角形などを引ける。確かに SVGはまだ普及してないけど、傍流を作っちゃっていいのか?

どういう風に両者が住み分けるつもりなのか、探してみたら XTech 2005で話されたらしい「A Richer Web: SVG And Canvas In Mozilla」というのが見つかった。

これをみても両者の比較は少ない。 3ページ目に「SVGだけじゃ完璧じゃない」ってデモがあるぐらいだ。まあ、object的な構造を持ったものじゃなくてべたっとした Canvasを作るのに便利だ、って意味か。

ほかに比較記事は「SVG vs. Canvas: Tastes Great, or Less Filling?」というのが見つかった。これの比較matrixから抜粋してみると:

機能	SVG	Canvas
描画	易:SVG tagによる	易: APIによる
絵の操作	難: 滅多に実装されていない tagが必要	易: APIがある
オブジェクト	易: モデルを宣言できる	難: モデルなし。自分で JSのモデルを作れ (楽しい!)
interaction	易: Event modelつき	難: 全部自分でハンドルする
Direct3D でいうと	Retained Mode	Immediate Mode

モデルを持つ richな SVGから モデルを持たない平らな Canvasに戻ったということか。JavaScript libraryで頑張ろうっていう最近の風潮だと、Browserがモデルを管理するSVGより柔軟性があっていいってことかな。重複する部分も多そうだが。

あと「いまどきのデスクトップ処理系」にあるような最新の二次元描画系の機能向上に SVGとかがついていっていないせいもあるかもしれない。それなら直接 Networkごしに JavaScriptで叩いたほうがよいという。Appleには Quartzが、Mozillaには Cairoがあるからな。

こうやって JavaScriptははびこっていくんだなあ。

まあ、自分もだらだらお絵かきしたいことはよくあるので、そのときに使わせてもらおう。