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
Inkscapeで保存したファイルをエディタで開いて、<svg></svg>部分をコピペしただけ。拡大してもラインがギザギザになることはない。グラデーションやぼかしのような表現もできる。HTML5のスライダーとJavaScriptを使って拡大縮小ができるようにしてみた。
拡大縮小部分のソースは上記で、inputがスライダー。span部がスケールの数値。JavaScript部分でスライダー値をSVG画像のLayer1に適用している。
さてSVGとは、HTMLで扱える画像フォーマットのひとつと考えるのが一番シンプル。JPEG,GIF,PNGなどが画素の集まりであるラスターイメージなのに対して、SVGはベクターイメージで、数値化した座標をもとに線やら図形やらを描画するので、拡大しても画像が荒れることはない。しかもテキスト(XML)で書かれている。JavaScriptで操作することも可能。SVGは企業間での開発競争の末、標準化されたフォーマットなのでオープンになっている。何かと期待したくなるフォーマット。
まずはフリーのドローソフトであるInkscapeを使って絵を描いて、それをBlogに埋め込んでみる。Inkscapeは標準でSVGフォーマットで保存するので、親和性はかなり高いと思う。まずは立方体を描いてみる。
1.0
Inkscapeで保存したファイルをエディタで開いて、<svg></svg>部分をコピペしただけ。拡大してもラインがギザギザになることはない。グラデーションやぼかしのような表現もできる。HTML5のスライダーとJavaScriptを使って拡大縮小ができるようにしてみた。
|