SVGを使う

雑誌の付録CDに掲載されていた、SVG編集ソフトsodipodiをインストールし、diaのSVGデータが認識できることを確認。ただし、みょうに 小さく認識するので、読み込んだ図を拡大しないと使えない。 Netscapeで描画させる為、Adobeに日本語サイトから、SVGviewerをダウンロードしたが、デモすら描画できず。 英語サイトの方が新しいのでそちらからダウンロードしなおす。

SVGviewerインストール後、Netscapeでsodipodiが作成したデータを描画しようとしたが、DOC TYPEが違う表示して描画せず。DOC TYPEをAdobeからダウンロードしたデモデータと同一にする(又は外す)と、認識できないネームスペースがあると表示し、描画はせず。 sodipodi独自のタグやネームスペースの定義箇所を削除すると、やっと描画した。しかし、線にかこまれた部分が黒く塗りつぶされてしまう。 sodipodiのSVGのネームスペースが認識出来ないのが原因だと思われる。

GNOMEのWEBサイトを見つけてそこから、sodipodiの最新(2001/5/18)をダウンロードしてみる。 しかし、DOC TYPEは古いままで、Netscapeでは表示できなかった。 また、日本語コードが扱えないのも判明。 プログラムを修正して対応する方針とする。

プログラムの修正が終わるまでは、テキストエディタでSVGデータを作成することで、SVGの仕様を理解する。

また、サイクリングコースの地図データをデータベース化し、それから、SVGを生成するツールを 作成する。SVGのインタラクティブ機能を活用して使いやすい地図にしたい。


これまでの画像データの問題点

SVGの特徴

SVGエディタのインストール

svgデータは、adobe のソフトを使用する方法もある。これについては、adobeのサイトを見てほしい。

いずれにしても日本語の扱いは中途半端なので、当面日本語は使わないことにする( 2001/06/16)。

adobe SVG Viewer の使用を前提に"UTF-8"で保存することにする。( 2002/02/10)。

sodipodi (Linux)

ここでは、フリーソフトのsodipodiをVine Linux 2.1.5にインストールした時の記録を記述する。

sodipodi は、日本語が扱えないことから察することもできるが、UNICODEが扱えない。

Jasc WebDraw(Windows)

ここでは、ベータ版ソフトの Jasc WebDraw を Windows95にインストールした時の記録を記述する。

WebDraw は、UNICODEが扱える。が、日本語は、描画されず、しかもShiftJISで保存する。

SVG Toolkit

エディタでは無いが、SVGをJPEGに変換する機能を持っている。また、UNICODEで保存したSVGデータを描画することが出来る。これも日本語は、駄目みたい。

ブラウザへのSVGプラグインのインストール

UNICODE(UTF-8,UTF-16)、日本語もOK。今はテキストエディタでSVGを作成し、これで確認している。

SVGビュワーのダウンロード

Adobeのサイトからダウンロードする。日本語サイトの対応は、本家より遅れ気味だが、そこそこ追いついている。私は、本家から最新をダウンロードする。

SVGビュワーのインストール

上記サイトの説明に従ってインストールする。

ブラウザの設定

Javaを有効にする。

サーバの設定

WEBサーバの設定

mimeタイプを追加する。Apacheの例を次に示す。.svgzは、圧縮形式の拡張子である。

AddType image/svg+xml .svg .svgz

CVSの設定

SVGファイルをUNICODEで保存する場合、CVSの上記拡張子の扱いに関する設定は、バイナリ(-k 'b')にしておく。

SVGを利用したWEBページの作成

テキストエディタを使ったSVGファイルの作成

日本語を使用する場合、作成したSVGファイルは、UNICODE(UTF-8)で保存すること。

SVGデータのHTMLへの埋め込み

embedタグを使用する。objectタグを使用したいところだが、サポートしているブラウザがほとんど無い状態だから仕方が無い。SVGがプラグインでは無く標準でブラウザに組み込まれるようになれば、imgタグが使用できるようになるだろうか。

embedタグの使用例を次に示す。

    <embed src="svgdata.svg" name="SVGEmbed"
        height="80" width="160"
	type="image/svg-xml"
        pluginspage="http://www.adobe.com/svg/viewer/install/">

参考文献・WEBサイト