【連載】Web開発入門：HTML5＋JavaScript＋CSS3で作るWebアプリケーション　～第ー回「画像を使わずに描画(2)」～

投稿者：制作部

2013/06/07 16:01

この記事は約5分で読むことができます。

前回からだいぶ時間が経ってしまいましたが、引き続き画像を使わずに描画することについてお伝えしていこうかと思います。

今回は、SVG（Scalable Vector Graphics）についてです。

まずはSVGを書いてみましょう！

まずはベーシックなHTML5のソースを準備しましょう。

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

HTML5はすっきりしてていいですね。

それでは、早速SVGのタグを書いてしまいます。

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello, world!</h1>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200">
      <rect x="10" y="10" width="180" height="180" fill="royalblue" stroke="blue" />
    </svg>
  </body>
</html>


[ 実際に動かした例はこちら ]

これだけで、とりあえず図形が書けました。

非常に単純な例ですが、見ただけでもなんとなくの使い方は分かっていただけませんか？
<svg>というタグに特定の属性とサイズを書いて、その中に描画の内容を書いていきます。
上記の例の<rect>というのは、Rectangleつまり「長方形」を表すものです。
fillは「塗りつぶしの色」、strokeは「枠線の色」となります。

それではSVGで少しだけ複雑な図形を描いてみます。

五芒星を書いてみましょう。

<!DOCTYPE html>
<html>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200">
      <polygon points="100,5 38,180 190,66 10,66 162,180" style="fill:lightblue; stroke:royalblue; stroke-width:3;" />
    </svg>
  </body>
</html>


[ 実際に動かした例はこちら ]

少し書くことが増えました。
<polygon>は、多角形を描くことができるタグです。
points属性によって、X、Y座標を順番に指定していきます。最初100,5の点からスタートして、38,180（左下）に線をつないで、次に190,66（右上）に…という順番で線を引いていく、ということを行っています。
先程fill属性で色を指定していましたが、ここではstyle属性によって色などを指定しています。このような書き方もできます。

SVGではリンクも挿入できます。

リンクは、<a>タグで表し、いわゆるHTMLの<a>タグと同じように利用できます。
リンクを使う場合は、SVGのタグにXLinkのネームスペースを追加する必要があります。（※ネームスペースについてはまたの機会に）

それでは実際に書いてみましょう。

<!DOCTYPE html>
<html>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
      <a xlink:href="http://www.web-consultants.jp/">
        <polygon points="100,5 38,180 190,66 10,66 162,180" style="fill:lightblue; stroke:royalblue; stroke-width:3;" />
      </a>
    </svg>
  </body>
</html>


[ 実際に動かした例はこちら ]

実行例の五芒星をクリックすると別サイトへリンクします。
このようにしてリンクを設置できます。
現在のクローラ状況ははっきりしませんが、今後こちらのリンクもクローラにしっかり読まれるはずです。

illustratorからSVGを書き出す。

実際に図形を書いたりするのは単純なものならいいですが、複雑なものになってくるとなかなか座標を打ち込むのは難しいです。
私個人の意見ですが、正直五芒星でも難しいです…。

そこでより複雑な図形を描くにはillustratorやInkscapeなどのグラフィックソフトを使うといいでしょう。

それでは、手順をご説明します。

illustratorで図形を描く
とりあえず、ツイッターの鳥でも…
「ファイル」⇒「別名で保存」、ファイルの種類は「SVG」を選択
ダイアログの中の「SVGコード」をクリックするとブラウザに出力されます。
出力されたコードをソースに貼り付けて完了です。

[ 実際に動かした例はこちら ]

Raphaelで使うSVG

Raphael(http://raphaeljs.com/)を使うと簡単にSVGが設置できるほか、IEでもVMLに変換して出力してくれます。
非常に便利なので、こちらも利用してみてはいかがでしょうか？

<script>
// SVGを 320 × 200で、(10, 50)の位置に作成
var paper = Raphael(10, 50, 320, 200);

// 円（&lt;circle&gt;）要素を at (50, 40)に半径（radius）10で作成
var circle = paper.circle(50, 40, 10);

// 円を赤で塗りつぶし
circle.attr("fill", "#f00");

// 円弧を白に
circle.attr("stroke", "#fff");
</script>

このようにしてSVG要素を作ることができます。
RaphaelではSVGで使用できるアニメーションなども簡易に用いられるので、かなりリッチなコンテンツを手軽に作れます。

※補足情報ですが、illustratorを使ってRaphaelの path() に読ませるときは、「複合パス」にしておく必要があります。

それでは、SVGについては今回はここまでにします。
また機会があればSVGについてもっとまとめてみたいと思います。

次回は、<canvas>タグについて説明します。

【編集担当：安藤】

Webシステム開発