Life is beautiful

　HTML5/CSS3の重要性に関しては、ここでも何度か取り上げているが、ちょっと見逃しなのがSVGの重要性。IE9がサポートすることになって、ようやくSVGを活用したサイトの構築が現実的になって来た。HTML5のCANVASがJavaScriptで動的に「描く」ことを前提にしているAPIであるのに対し、SVGはHTMLとの親和性のよいマークアップ言語である点はちゃんと認識した上で使い分ける必要がある。特に、モバイルデバイスでは、CANVASでのアニメーションはやたらと電池を消費するので、ある程度までのアニメーションならば、CSS3アニメーション＋SVGの組み合わせの方が適している。

　とうことで、今回は勉強も兼ねて、SVGを生成するプログラムを書いてみた。開発中のiPad向けのベクター・エディタ、neu.Drawから直接SVGを書き出すというモジュールだ。

　グラデーションの扱いと、グループ化したベクターデータの座標変換に少し苦労をしたが、そこそこのものが動くようになったので、それで作成したサンプルSVGをココ（http://satoshi.blogs.com/raw/drawing-26.svg）に置いておく。

　お手持ちのブラウザーで見ていただきたい。ブラウザーがSVGをサポートしていれば、下に貼付けた図（下の図はPNG）と同じようなものがブラウザーのウィンドウ一杯に表示されるはずだ。それも、ブラウザーを拡大縮小すると、それに応じてきれいにベクターで再描画してくれるはずである。

　ちなみに、これはテストも兼ねているので、もし不具合を見つけた場合には、ブラウザーの種類とバージョンをコメント欄なので教えていただくと、とても助かる。特に、最近はWindowsマシンを持ち合わせていないので、IE9でもちゃんと表示されるかにとても興味がある。