HTML5以前、WEBページ内で図形を表示する場合、画像ファイルを読み込むか、Adobe Flashなどの組み込み要素を使う必要がありました。
特にグラフ表示など動的な図形を表示するには、CGIを用いて動的な画像生成を行うか、Adobe FlashやJavaなどに頼る必要がありました。

HTML5からは、Javascriptを用いてブラウザだけで図形を描く「<canvas>」要素が追加されました。
また従来から存在している「SVG」という標準規格を、HTML内で利用できる「<svg>」要素が追加されました。

ここでは、これら 「<canvas>」要素 と 「<svg>」要素 について取り上げます。

<canvas>要素は、HTML5にてはじめて追加された仕様です。
HTML5の仕様の中でも、最も注目を集めているものです。

これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。
また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJavaアプレットが使われてきました。
<canvas>要素は、Adobe FlashやJavaのような組み込み要素を使わずに、JavaScriptベースで図を描くことができます。
これにより、標準のHTMLとJavaScriptだけで、グラフやゲームグラフィックスなどのWEBアプリケーションをすばやく表示できるようになります。

<canvas>要素の使用方法については、以下のページにて詳しく説明します。

1. canvas要素(1)　簡単な図形
2. canvas要素(2)　色とスタイル
3. canvas要素(3)　グラデーション
4. canvas要素(4)　画像の読込
5. canvas要素(5)　テキスト
6. canvas要素(6)　図形の操作
7. canvas要素(7)　その他
8. canvas要素(8)　非対応ブラウザでの利用
9. canvas要素(9)　役立つ応用例

<canvas>要素では、線や円といった図形を描いたり、色を塗ったりすることは可能です。
しかし、描いた図を動かすこと(アニメーション)はできません。
もしアニメーションを実現したい場合は、一コマずつ、図を描きなおすという処理を繰り返す必要があります。

リスト1. <canvas>要素の記述例

<canvas id="sample01" width="500" height="300">
	<p>※ここにcanvas要素に対応していない場合、ここの内容が使われます。</p>
</canvas>
<script>
var canvas = document.getElementById('sample01');
var context = canvas.getContext('2d');

//赤く塗りつぶし
context.beginPath();
context.fillStyle = 'rgb(255,00,00)';
context.arc(250, 100, 80, Math.PI*0.5, Math.PI*1.5, true);
context.closePath();
context.fill();
// 青い色の円を描く
context.beginPath();
context.strokeStyle='#0000ff';
context.arc(250, 100, 80, 0, Math.PI*2, true);
context.closePath();
context.stroke();
</script>

<canvas>要素の実装例

var canvas = document.getElementById('sample01');
if(canvas.getContext)
    var context = canvas.getContext('2d');
}

【特徴】

• 画像はピクセルでできており、JavaScriptでピクセルを描く
• ピクセルの編集が速い
• 画像を拡大すると画質が荒れる。
• 画像を編集するには、ピクセルを新たに描くことが必要
• 画像サイズが大きくなれば大きくなるほど重たくなる
• アクセシビリティに難あり。例えば検索エンジン等はJavaScriptで作られる文字列を認識できない
• 現状、オーサリングツールがないため、プログラミングをする必要がある

対応ブラウザ

※2011年6月現在、FireFox(2～)、Opera(9～)、Safari(3～)、Chrome(1～)、IE(9～)で動作確認

SVGとは、「Scalable Vector Graphics（スケーラブル ベクター グラフィックス）」。 W3Cによりオープン標準として勧告された、XMLによって記述されたベクターグラフィック言語です。 HTML5以前から、SVGは利用することが出来ました。 但し、その際はFlash同様、HTMLから利用する場合は組み込み要素として使用していました。 (Adobe Illustratorなどのドロー系描画ソフトにて、作成・利用されています。) <svg>要素は、HTML5にてはじめて追加された仕様です。
<canvas>要素同様、画像無しに図形を作成出来ます。

<canvas>要素は、Javascriptベースのため、どうしてもスクリプトの記述を必要とします。
<svg>要素は、その中身をタグベース(「SVG」の記述方法)で、作成することが可能です。

<canvas>要素の使用方法については、以下のページにて詳しく説明します。

1. svg要素(1)　簡単な図形
2. svg要素(2)　色とスタイル
3. svg要素(3)　グラデーション
4. svg要素(4)　画像の読込
5. svg要素(5)　テキスト
6. svg要素(6)　図形の操作
7. svg要素(7)　SVGとCSS
8. svg要素(8)　その他

<svg>要素では、線や円といった図形を描いたり、色を塗ったりすることは可能です。
加えて、<svg>要素は、HTML同様 DOMを利用できます。
それにより、Javascriptによる加工や、イベントの発生、CSSの利用などが可能です。
もしアニメーションを実現したい場合も、対象要素を変化させる事が可能です。

リスト2. <svg>要素の記述例

<style type="text/css">
.halftmoon {
	fill	:blue;
}
.circle {
	fill	:none;
	stroke	:red;
	stroke-width	:2;
}
</style>
<svg width="500px" height="200px" viewBox="0 0 500 200">
	<path class="halftmoon" d="M250 20 A80 80 0 1 0 250 180"/>
	<circle class="circle" cx="250" cy="100" r="80"/>
</svg>

<svg>要素の実装例

【特徴】

• 規格が確立している(W3C勧告)
• 画像はベクターでできており、XML言語で描く
• 画像を拡大すると画質が荒れない
• HTML要素同様、JavaScriptやCSSを使って編集したりインターラクティブni使える
• オブジェクト数が多くなれば多くなるほど重たくなる
• アクセシビリティは良い。例えば図中の文字列を検索エンジン等は文字列として認識する
• Adobe Illustratorなどオーサリングツールが存在する

対応ブラウザ

※2011年6月現在、FireFox(3.6～)、Opera(11～)、Safari(5～)、Chrome(10～)、IE(9～)で動作確認

HTML5では、<canvas>要素や<svg>要素以外にもいくつかの描画要素に対応しています。

その他の描画要素の例

・MathML

数式などを表現するXML言語

<math>要素を使います。

<math>要素の実装例

$1+\frac{\mathrm{<mn>a</mn>\; <mo>-</mo>\; <mn>b</mn>}}{c}$

※2011年6月現在、FireFox(4～)で動作確認