2014年2月27日木曜日

HTML5ではSVGとCanvasどっちを使うべきか?早見表

HTML5ベースの図やグラフを表示する要件が来ました。
そこでいろいろ調べた結果、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がいいっぽいです。
しかし、必ずしもこれじゃなきゃダメ!!ッて言うことではなく、時と場合によって色々柔軟に選択する必要があるということです。
う~ん・・・難しい

参考URL

Written By : // 9:55
Category:

0 コメント:

コメントを投稿

 

About

このブログは筆者の備忘録として色々記載しています。
Powered by Blogger.