SVG＆CSS＆Audio Data API
～ ウェブの最新技術が魅せる「Firefoxの灯」（3）

いろいろな形をいろいろな色で描こう

　SVGでも、矩形・円形・多角形・自由曲線などを、自由な色や透明度で表示することが可能です。

SVG：svg_3.svg

...
<line x1="200" y1="50" x2="200" y2="350"
        stroke-width="5" stroke="black" />

<path d="M 200 50 L 150 150 L 250 150 z"
    fill="white" stroke-width="5" stroke="black" />

<circle cx="200" cy="200" r="50"
    fill="rgba(0,0,255,0.8)" stroke-width="5" stroke="black"/>

<rect x="150" y="250" width="100" height="50"
    fill="red" stroke-width="5" stroke="black"/>
...

svg_3.svg

　lineやrect、circleなどは一目瞭然で、線、矩形、円を表します。それぞれの属性に表示したい値を指定し、描画していきます。pathは自由曲線を表現でき、その座標の指定方法は独特です。先のサンプルでは、三角形の描画にこれを使いました。具体的にはd="M 200 50 L 150 150 L 250 150 z"の指定がそれにあたります。指定中のM、L、zはそれぞれ、M：moveto、L：lineto、z：closepathという意味があり、例では（200,50）に移動、そこから（150,150）の位置まで線を、続けて（250,150）まで線をつないでパスを閉じ、結果的に三角形ができあがります。movetoやlineto以外にも、曲線を表すキーワードもあり、ベジエ曲線などを描くことができます。詳しくはこちらをご覧いただければと思います。

文字を描こう

　SVGでも、文字を描くことができます。

SVG：svg_4.svg

...
<text x="72" y="100"
    font-family="Arial" font-size="30" fill="white" stroke="blue">
    HELLO CANVAS
</text>
...

svg_4.svg

イメージを描こう

　もちろん、イメージを描くことも可能です。

SVG：svg_5.svg

    ...
    <image x="200" y="200" width="122px" height="100px"
        xlink:href="dino.png">
    </image>
    ...

svg_5.svg

　ここまで見てきたように、SVGでもさまざまな形や文字を自由な色で描いたり、イメージなども簡単に描画することが可能となっています。前回の記事では、Canvasによる描画を行ってきましたが、SVGにおいても同等の描画はできそうです。

　では、どのように使い分けると効果的なのでしょうか。筆者は、SVGには永続的なものを、Canvasには一時的なものを描くのに利用すれば良さそうだと感じています。なぜなら、SVGにおいてはそれぞれの描画エレメントがブラウザ上で管理されており、長期間に渡ってのエレメントの取り出し／修正などに長けていると考えるからです。

　一方、Canvasでは、描画要素はプログラマが管理する必要があります。前回の記事で作ったボールの移動のようなアニメーションを行う場合はグラフィクスをいったんクリアし、再描画する過程を踏みます。永続性という軸からみると、このプログラムスタイルはやや直感性に欠ける気がします。

　もちろん、組み合わせでなくても、どちらかのみを選択し、アプリケーションを構築していくことも可能です。灯の場合は、日本地図を何度も再描画すれば処理負荷が大きくなってしまうことが予想されたので、永続的な描画が必要な日本地図にはSVGを、灯にはCanvasを選び、組み合わせています。