0.はじめに

まずは、SVG(Scalable Vector Graphics)を使うための準備をします。
Windows 環境で Internet Explorer で SVG を使う場合には、Adobe 社による SVG プラグインが 必要です。

からダウンロードしてインストールしてください。

Mozilla/Firefox の SVG 版も あります。ただし、現段階では完全に動作とはいかないようで、ずいぶん動作が異なります。

目的

基本的な SVG の説明から、JavaScript を使って SVG でアプリケーションができるまで、 を目標にしてページを作成していきます。

きれいな画像を作る場合には、Illastrator などを使って、SVG を出力させたほうが楽ですし、 効率もよいです。フリーなところでは、Inkspapeという、 高機能な SVG Editor もあるので、画像そのものをきれいに描く場合には、手書きで SVG を 作成することはないでしょう。
しかし、SVG でアプリケーションを作ろうとしたとき、JavaScript で XML/DOM を操作する ことになります。このときに、SVG の構造を知っておく必要があります。 本ページでは、そんなところを目指していきます。

動作環境

本ページは、Windows XP + Internet Explorer 6.0 + Adobe のプラグインで動作確認しています。 一部、JavaScript を使う部分もあるので、Mac 版の Internet Explorer では動作しません。

なにぶん、自分の学習も含めてページを作っているので、用語やタグの使い方が標準とは異なる かもしれません…、なるべく、標準にあわせるようにしていきますが、その点はご了承ください。

Windows XP の SP2 を適用した場合には、本 WEB ページを表示する際に Internet Explorer 情報バーが 表示されます。これは、本 WEB ページで、Adobe 社のプラグインを使っているためです。
フレームを使っているので、１回だけ確認すればよいのですが、いちいち面倒臭いという方は、 セキュリティの設定で「Web ページが、制限されたプロトコルをアクティブコンテンツに使用することを許可する」を 「有効にする」に設定するか、信頼済みサイトに本サイトを登録してください。