Canvas VS SVG
これは 【その1】ドリコム Advent Calendar 2015 25日目(最終日)の記事です。
24日目の記事はSasasakiさんの UNREAL ENGINE 4 でクリスマスカードを作ってみた! です。
【その2】ドリコム Advent Calendar 2015 もあわせてどうぞ。
自己紹介
こんにちは、ジャオと申します。
中国天津から来てます。日本語はよくなくて申し訳ございません。 あるゲームのサーバーサイドエンジニアです。フロントエンド技術大好きです。
Canvas VS SVG
CanvasもSVGもHTML5の標準の一部です。どちらもウェブページでDOMみたいな制限なしで自分が好きなように図形などを描くことができます。
恥ずかしいですが、自分はあんまり触ったことがないです。最近余裕があって勉強して見ました。入社研修の時のcocos-2dxで作ったゲームをCanvasで作り直して、SVGでデーターチャートを作ってみました。この記事で勉強の時感じたこの二つ技術の差を述べたいと思います。
書きやすい?読みやすい?
Canvasは全部JSで図形を書きます。APIはあんまり把握しやすくないと思います。
例えば円形を描く時、まずcontext.beginPath() をコールします。次にcontext.arc(x, y, r, startAngle, endAngle, anticlockwise)によって円形を定義します。
その後context.fillStyleとcontext.strokeStyle / context.lineWidthの値の設定によってフィルとストロークのスタイルを定義します。最後にcontext.stroke()とcontext.fill()によって円形をアウトプットします。
SVGは普通のマークアップ言語で、attributeによって図形を定義します。比較的に書きやすくて読みやすいと思います。同じ円形を描く場合、下記のようにタグひとつで済みます。あと、attributeを使わず普通のCSSでスタイルを調整することもできます。
<circle cx="100" cy="100" r="50" fill="red" stoke="green" stroke-width="2"/>
下記は具体的な一例です。こんなやつを描くとCanvasとSVGのコード量はどうでしょうか。
See the Pen WrGjBN by cliffzhao (@cliffzhao) on CodePen.
See the Pen xZEdNX by cliffzhao (@cliffzhao) on CodePen.
やっぱりSVGは便利だと思います。コードの行数は少なくて理解しやすいですね。
User Interaction
Canvasは含めている図形ごとにイベントハンドラーを指定することができず、Canvas全体だけで指定することができます。イベントハンドラーの基本的な行為はユーザーの操作によってCanvas全体を書き直しです。下記のような図形をクリックして図形の色を変える実装で、Canvas全体にクリックのイベントハンドラーはクリックの位置を判断して、Canvasを書き直すかどうかを決めます。
→
See the Pen VeKbOd by cliffzhao (@cliffzhao) on CodePen.
SVGは含めている図形が全部DOMとしてHTMLドキュメントに入っていますので、普通に図形にidかclassを指定して、下記のようにJSで直接にイベントハンドラーを指定することができます。あと、CSSの:hoverなどのPseudoを使っても簡単にUser Interactionを実現することもできます。
See the Pen PZGmvL by cliffzhao (@cliffzhao) on CodePen.
動画
Canvasは動画機能が全然ついていないので、動画を実装する方法はある頻度で書き直すしか無いです。
SVGは動画タグがあってSVGだけで簡単な動画ができます。あと、SVGの含めている図形が全部DOMなので普通の動画JS Libraryで動画を実装することもできます。
ブラウザー対応状況
CanvasとSVGはほぼ同じでIE9+ / Firefox / Chrome / Safariと大体全部のモバイルブラウザーで支えます(http://caniuse.com/#feat=canvasとhttp://caniuse.com/#feat=svg)。古いIEの対応としてexcanvas.js(Canvas / https://github.com/arv/explorercanvas)とraphael.js(SVG / http://raphaeljs.com/)が使用できます。
パフォーマンス
状況によって違います。
画面が大きくなるとピクセル数が増えるので、Canvasのパフォーマンスは低下します
。一方、画面上のオブジェクトが増加すると、SVGがDOMに追加するオブジェクト数も増えるので、SBGのパフォーマンスは低下します。
まとめ
項目 | Canvas | SVG |
---|---|---|
API | 簡単 | 困難 |
対話性 | 良い | 良くない |
動画実装 | 簡単 | 困難 |
ブラウザー対応状況 | 同じ | 同じ |
パフォーマンス | 要素が多い場合はよい | 要素が少ない場合はよい |
総合的にいうとSVGのほうが実装しやすいと思います。特にAdobe Illustratorなどのツールによって直接に作成することができます。要素が多いゲームや画像編集ツールなど以外の場合、例えばチャートなど、SVGで実装したほういいと思います。