2012/03/23

HTML5 SVGを少々

最新各種ブラウザでSVG (Scalable Vector Graphics) が見れるようになってきたので、そろそろ実験レベルで試してみようと思う。でもSVG未対応のIE8(Internet Explorer 8)のアクセスが多いので、積極的には利用しないほうがよさそうだ。実際このBlogでもWindowsXP IE8で見ている人の割合は26%で一番多い。ちなみにこのBlogは毎日200人ぐらいのアクセスがあるのだが、人数に換算すると毎日50人ぐらいはSVGが見れないことになる。無視してはいけない数値だ。まぁIE8でもJavaScriptライブラリで表示させることは可能だが、そこまでやる人は少数派だろう。WindowsXPはIE8が最終バージョンで、最新のIE9の導入はできない。すでに時代遅れになっているので、できればChromeなどに乗り換えてもらいたいところだ。今回の記事はIE8ユーザーのことはあまり考慮していない。たぶん下の絵が見れているIE8ユーザーは少ないと思う。

さてSVGとは、HTMLで扱える画像フォーマットのひとつと考えるのが一番シンプル。JPEG,GIF,PNGなどが画素の集まりであるラスターイメージなのに対して、SVGはベクターイメージで、数値化した座標をもとに線やら図形やらを描画するので、拡大しても画像が荒れることはない。しかもテキスト(XML)で書かれている。JavaScriptで操作することも可能。SVGは企業間での開発競争の末、標準化されたフォーマットなのでオープンになっている。何かと期待したくなるフォーマット。

まずはフリーのドローソフトであるInkscapeを使って絵を描いて、それをBlogに埋め込んでみる。Inkscapeは標準でSVGフォーマットで保存するので、親和性はかなり高いと思う。まずは立方体を描いてみる。
1.0
image/svg+xml cubic
Inkscapeで保存したファイルをエディタで開いて、<svg></svg>部分をコピペしただけ。拡大してもラインがギザギザになることはない。グラデーションやぼかしのような表現もできる。HTML5のスライダーとJavaScriptを使って拡大縮小ができるようにしてみた。
<input id="slide1" type="range" 
   value="1.0" min="0.2"  max="10.0" step="0.1"
   onchange="changeValue(this.value)" />
<span id="scale1">1.0</span>
<script type="text/javascript">
    function changeValue(value) {
    document.getElementById("scale1").innerHTML = value;
    var cube1 = document.getElementById("layer1");
    cube1.setAttribute("transform", "scale("+value+", "+value+")");
    }
</script>
拡大縮小部分のソースは上記で、inputがスライダー。span部がスケールの数値。JavaScript部分でスライダー値をSVG画像のLayer1に適用している。