遂に正式版のInternet Explore 9が登場しました。東日本大地震の影響で日本でのリリースは遅れていますが・・・。

そのIE9ではHTMLの次期バージョンHTML5が動くので、色々試しています。今日は新たに動くようになったSVGについて紹介します。SVG(Scalable Vector Graphics)とはAdobe Illustratorで編集されるようなベクターデータをXML形式で保存したものです。以前紹介したMathMLに近い感じですね。で、IE9ではこれをHTML中に埋め込めるようになりました。

例えば以下のようなコードを入力すると、、、

<svg>
<circle cx="50" cy="50" r="50" fill="skyblue" />
<circle cx="100" cy="50" r="50" fill="orange" />
<circle cx="150" cy="50" r="50" fill="yellowgreen" />
</svg>

※Allaboutから引用（https://allabout.co.jp/gm/gc/311909/2/）

・・・のようになります。表示できないブラウザのために画像化すると、

のような感じ。svg要素で描画キャンパスを作り、その中にcircle要素を挿入することで、円を描画しています。すごく分かりやすいコードかと思います。

しかしHTMLもそうですが、コードというのは視覚的に分かりにくいもの。ましてや普段は触れないSVGなんて、どんなレンダリング結果になるか想像もつきませんね。そこでInkscape(https://inkscape.org/)などのドローソフトで、SVGを出力し、それをぺたっと貼るのもありですね。今回はLibre Office 3.3 Calcで作成したグラフを、InkscapeにてSVG形式でエクスポートしたものを貼り付けてみました。

ちょっとテキストがずれているのは愛嬌ですｗ

テキストの埋め込みが出来るのも強みです。画像はあくまでも画像であって、パソコンには文字として認識されませんからね。あとはベクターデータなので拡大・縮小にも耐えうるし、再編集もしやすいです。これは是非普及してほしい技術です。