SVGを書いてみる

Webページのコンテンツを書くとき、画像を使いたいときがある。画像と言ってもそんなにこったものでなく、単純な丸とか四角とか楕円とか、そんなレベルでいい。これまでは、そういう簡単な画像を png やら tiff やら、何らかの画像ファイルとして用意して、HTML の image タグで表示させていたけれども、どうやらそんなことをしなくても直接 HTML の中に描画する方法があるようだ。それが SVG。もちろん、ブラウザが対応している必要があるが、IE8 以降では大抵は対応しているらしいから・・・もう問題ないだろう。
とりあえず、SVGの大本の情報はScalable Vector Graphics (SVG) 2にある。Basic Shapes と Path だろうか。自分が今の時点で使いたいと思っているのは。
サンプルコードを引用。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example triangle01- simple example of a 'path'</title>
  <desc>A path that draws a triangle</desc>
  <rect x="1" y="1" width="398" height="398"
        fill="none" stroke="blue" />
  <path d="M 100 100 L 300 100 L 200 300 z"
        fill="red" stroke="blue" stroke-width="3" />
</svg>

何が何を意味しているかはおいおいやっていこう。これでHTMLでVisio like なことができるようになる・・・かもしれない。