そこでいろいろ調べた結果、HTML5では主にSVG(Scalable Vector Graphics)とCanvasが主な技術だとわかりました。
しかし、この2つの仕様・・・グラフをかけるJavascriptベースのライブラリは色々あるのですが、そのライブラリのレンダリングがどの仕様に基いて作られているかによって大きく変わります。
そこで、SVGとCanvasのメリット・デメリットなどを早見表としてまとめたのでメモとして記載したいと思います。
早見表
| SVG | Canvas | ||
|---|---|---|---|
| 概要 | Scalable Vector Graphicsの略称で、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。解像度にかかわらず高品質な表示になる。 | HTML5から新しく追加される図形を描く為の技術仕様 | |
| ブラウザ | IE | 9+ | 9+ |
| Firefox | 26+ | 26+ | |
| Chrome | 31+ | 31+ | |
| Safari | 5.1+ | 5.1+ | |
| Opera | 19.0+ | 19.0+ | |
| iOS Safari | 3.2+ | 3.2+ | |
| Opera Mini | 5.0-7.0 | 5.0-7.0(部分的) | |
| Android Browser | 2.1-2.3(部分的) 3+ |
2.1-2.3(部分的) 3+ |
|
| Blackberry Browser |
7.0+ | 7.0+ | |
| IE Mobile | 10.0+ | 10.0+ | |
| パフォーマンス | 画面サイズ | - | 画面が大きくなるほど描画するピクセル数も増加するためパフォーマンスが大きく低下 |
| オブジェクト数 | SVGがDOMに追加するオブジェクト数も増える為パフォーマンスが大きく低下 | - | |
| 特徴 | サイズに関係ない単純な画像描写によく使われる。 | 高速描画が特長であり、画像情報を保持する必要がない。 | |
| 用途 | 概要 | 静的な画像、表示と印刷のための高品質ドキュメント | 複雑なシーン、リアルタイムの数学的アニメーション、高パフォーマンス |
| 具体例 | チャートとグラフ | 2D ゲーム | |
| 理由・場面 | XML(SVG）に簡単にエクスポート出来る既存データからグラフを作成する。 ユーザー操作が必要である。 Webページのスタイルを使用する。 |
ゲームライブラリは低レベルグラフィックAPIを利用してきているため | |
結論
グラフならSVG、ゲームアニメーションならCanvasがいいっぽいです。しかし、必ずしもこれじゃなきゃダメ！！ッて言うことではなく、時と場合によって色々柔軟に選択する必要があるということです。
う～ん・・・難しい
