インターネット上の地図サービスでは、サーバ上のデータベースで端末の表示領域に応じた地図を動的に生成したり、クライアント上のECMA Scriptプログラムによって、タイル分割された地図を組み合わせたりして、自在にスクロールできる地図提供が近年流行しています。
しかし、サーバ上でデータベースを運用するのはコストがかかりますし、ECMA Scriptによるタイル合成では、クライアント上にそのサービス専用のプログラムをロードしますので、例えば、サービスＡとサービスＢを重ね合わせて（マッシュアップして）使う といったことを行おうとすると、かなりのプログラム知識が必要になります。 スクロール自在な地図が単なる地図ファイルの配信と標準のビューアだけで実現できれば、これらの問題の多くを解消できるでしょう。
そこで、SVG Mapコンソーシアムでは、SVG形式のタイル分割された単なる地図ファイルを用いて、自在に地図のスクロール表示を行う仕組みを SVG Mapプロファイルとして規定します。
この仕組みは、SVGの基本仕様を応用して実現されます。その方法を以下に説明します。
タイリングされた地図データ
個々の地図のタイルのファイルは、図のようにそれらを纏める（タイリングする）SVGファイルによって、一枚の地図に合成されることにします。このように、他のファイルをインポートするSVGファイルのことをコンテナSVGファイルと呼ぶことにします。
ここで、ファイルをインポートする仕様は、SVGが元々持っている、<image>（またはSVG1.2では<animation>）要素によって実現できます。コンテナSVGファイルの例を次に示します。
Container.svg
<svg ... viewBox="20 110 120 85">
<metadata ... />
<image x="0" y="0" width="100" height="70" xlink:href="0_0.svg"/>
<image x="100" y="0" width="100" height="70" xlink:href="1_0.svg"/>
<image x="200" y="0" width="100" height="70" xlink:href="2_0.svg"/>
<image x="0" y="70" width="100" height="70" xlink:href="0_1.svg"/>
<image x="100" y="70" width="100" height="70" xlink:href="1_1.svg"/>
<image x="200" y="70" width="100" height="70" xlink:href="2_1.svg"/>
<image x="0" y="140" width="100" height="70" xlink:href="0_2.svg"/>
<image x="100" y="140" width="100" height="70" xlink:href="1_2.svg"/>
<image x="200" y="140" width="100" height="70" xlink:href="2_2.svg"/>
</svg>
SVG仕様によれば、このような記述によって、地図タイルを張り合わせて（タイリングして）表示することが可能です。すなわち、W3Cが規定したオリジナルのSVG仕様の範囲で、タイリングされた地図の表示が可能です。（これは仕様上の話で、実際に可能かどうかはビューアの実装に依存します。例えば、FirefoxのSVGビューアでは今のところまだ<image>要素ではsvgの参照ができませんので、SVGのタイルの表示はできません。（タイルがjpeg形式であればできるようです））
参考：今後ご説明する、SVG Mapの主要な相互運用性を提供するハイパーレイヤリング機能でも、ファイルのインポート・コンテナSVGファイルは重要な要素です。タイリングでは、インポートしたデータを並べて表示しますが、レイヤリングは、データを重ねます。複数のデータをインポートして表示することに変わりはありません。
ビューアの実装要求仕様
さて、ここでSVG Mapプロファイルとしての新たな ビューア側の仕様を規定します。
要求仕様１： まず大前提の条件として、SVG Mapプロファイル準拠のビューアは、<image>要素によって、外部のSVGファイルのインポート表示ができなければなりません。
更に、クライアントのSVG Mapビューアは、上記のコンテナSVGデータに対応したロジックをもっている必要があります。そのロジックとは、以下のようなものです。
先のようなコンテナSVGをビューアで表示した場合、何の工夫もされていないSVGビューアでは、image要素が参照している全てのタイルデータをダウンロードしようとしてしまうでしょう。上の例ではまだ９個しかないので、ビューアの動作に問題は出ないかもしれません。しかし、例えば１００ｘ１００にタイル分割されたデータを表示しようとした場合、問題が起きるかもしれません。
要求仕様２： そこで、SVG Map profileに準拠したビューアは、<image>要素の領域(w,y,width,heightで指定されている）がビューアのビューボックスに入ったときに、その<image>要素が参照しているデータを動的に取得するロジックを少なくとも実装していなければならないこととします。
その仕組みを下の図で説明します。
タイリングされた地図の表示ロジックの説明図 （swfアニメーションです。右クリックで"新しいウィンドを開く"とすると良いでしょう。)
緑色のタイルがロードされていなければならないタイルデータです。
最初は、コンテナのviewBox="20 110 120 85" なので、左下の４枚(0_1.svg, 1_1.svg, 0_2.svg, 1_2.svg)が取得されます。 ここで、利用者が右上の方向にスクロール操作を行ったとします。すると、ビューアのビューボックスが移動していき、次々と(0_0.svg,1_0.svg)、(2_0.svg,2_1.svg)がロードされます。ここで、黄色のタイルは、一旦ロードされたものの、viewBoxから外れたために、不要となったデータです。このようなデータをメモリの許す限り常に保持し続けるか、すぐに捨て去るのかといった処理の工夫は、ビューアの実装に依存します。
ここで規定した仕様では、例えば、全部のタイルを表示してしまうような広いエリアの表示を行おうとすれば、結局全てのタイルの読み込みが始まってしまうでしょう。次回以降では、拡大・縮小表示を可能にするプロファイルの説明を予定しています。
