先日の HTML5 3Days の Tech Talk で Canvas と SVG の違いを簡単に説明しましたが、これを深く追求してレポートされている方がいらっしゃいましたので紹介します。

2009 年 10 月にカルフォルニアで開催された SVG Open 2009 で、ヘルシンキ大学の Samuli Kaipiainen 氏と Matti Paksula 氏によるプレゼンテーション　SVG vs. Canvas on Trivial Drawing Application で、SVG と Canvas の特性の違いや、それらを組み合わせる方法などが解説されています。このプレゼンテーションの内容は、こちらの資料に詳しく説明されています。

このプレゼンテーションを要約すると、次の通りです。

• ピクセル描画では Canvas が優れている。SVG でもできないことはないが、ピクセルごとにノードを作る必要があり、不効率。
• ベクター描画に加え、マウス操作が伴うアプリケーションでは SVG が優れている。Canvas では、ネイティブな機能として、このようなアクションが実装されていないため、その部分は自作する必要がある。
• どのシチュエーションでも、Canvas でも SVG でも実現できないことはないが、やはり、それぞれの特性を活かせる方を選択したほうが良いだろう。
• しかし、ウェブアプリケーションを作る際には、どちらの特性も必要となる場合がある。Canvas と SVG を組み合わせる方法がある。
• Canvas で描いたものを SVG に挿入する方法 – Canvas の toDataURL() メソッドを使って Canvas イメージを base64 でシリアル化し、それを、SVG の image 要素の xlink:href にセットする。
• SVG で描いたものを Canvas に挿入する方法 – SVG で描いたものをサーバー側で ImageMagick などを使ってラスタライズし、それを Canvas 側の drawImage() メソッドで組み込む。
• Canvas と SVG は対立関係ではない。相互補完の関係だ。

ちょっと私の要約が下手で、ポイントがずれているところがあるかもしれませんので、できれば原文を見てください。

私も Canvas と SVG が相互補完の関係であると思います。現状では、Canvas と SVG を組み合わせて使う方法は、このプレゼンテーションで紹介された方法以外にないと思いますが、将来的には、仕様として、これらを組み合わせることができる API ができるといいなぁと思いました。

コメントは受け付けていません。