SVG — Scalable Vector Graphics


従来の HTML で図を使うには, PNG, Jpeg などのビットマップ画像を img タグで貼り付ける手法しか用意されていませんでした。 その場合,ビットマップ画像の制約,つまり解像度によって 画像の質が決まってしまうという問題を避けることはできません。

画像を表現する別のファイルフォーマットとしては, Postscript や PDF に代表されるベクター形式のものが あります。これらは論理的に形や色の要素を記述するものなので, いくら拡大しても画面が粗くなるということはおきません。 たとえば次の有名な虎の絵を見てください。これは Postscript でオリジナルが作られたもので,それを PDF に変換したものですが, いくらでも 拡大縮小できる(= scalable である)というベクター形式の利点を供えています。 たとえば次の画像を拡大してみてください。 Ghostscriptでサンプルとして提供されている 虎の画像

HTML でも独自のベクター画像の仕様を定めて,ブラウザでレンダリングして 表示しようという研究開発は W3C を中心として進められてきていましたが, 最近まではまだまだ実験的な段階に留まっていました。しかし,そろそろ 機が熟してきたようで,Firefox を生み出した Mozilla ファンデーション が先進的な仕様を取り込み始めて,その成果が Firefox 1.5 から 採用されています。

サンプルを見れば分かるように, SVG 単なる画像表示を超える仕様をサポートしていて,マウスイベントを 利用して像を動かしたり,アニメーションを行ったり,その他さまざまの 機能が備えられています。

ドキュメントとサンプル

以下のサンプルを見るには,Forefox 1.5.0.1 以上をインストールしてください。

HTTPD の設定

HTTPD のファイルタイプ(MIMEタイプ)の設定で,次の2行が必要です。
拡張子 MIMEタイプ
svg image/svg+xml
xul application/vnd.mozilla.xul+xml

AN HTTPD の場合には,「オプション」⇒「一般」⇒「ファイルタイプ」で「追加」として,この2行を書き加えてください。

AN HTTPDのサイト

CGI と組み合わせる

フォームからパラメータなどを送信して CGI プログラムを起動してやれば, オンデマンドの描画システムを実現できることになります。 その実験をやってみることにします。

このサンプルは大したことを何もやっていませんが, プログラミングには無限の可能性があるので, アイディア次第でいくらでも多才な応用ができるはずです。 サンプルをいじったり,自分でソースを書いたりしながら, アイディアを考えて実現して下さい。