ここではSVGの基本要素の学習を踏まえて、 簡単な地図データをSVGで作成してもらいます。 具体的には、情報大の地図画像を利用しつつ、建物のポリゴンをSVGで 記述しながら、最終的にSVGファイルを作ってもらいます。
SVGファイルの作成はテキストエディタでもできますが、比較的簡単な図形など の記述にとどまり、複雑な図形の記述、また画像を取り込む場合には限界があ ります。現在、「Adobe Illustrator 10」などでSVG形式での出力をサポート しています。ここでは、「SVG Cats 2」というソフトウェアの利用も紹介し、 可能な範囲での使用方法を説明していきます。
この演習でSVGを用いて作成した地図データは、建物検索の結果として、 建物の位置を表示するために使われます。下記にサンプルがありますので、 参照してみてください。
下記に情報大の画像を示してあります。この画像を取り込み、さらにポリゴン、 経路を記述したSVGファイルを作成していきますので、まずはこの画像を 自分自身のディレクトリに保存してください。おそらく、 ~/public_html/xmlに保存するのがいいでしょう。 画像ファイル名は何でもいいのですが、特に希望がなければ、元々のファイル名 のcampusmap.gifのままでいいでしょう。
情報大の地図画像
(http://www.affrs.tuis.ac.jp/~nyushi/entrance/campuslife/image/campusmap.gif)
下記にはSVGファイルの表示画面をJPEG形式で保存した画像を示してあります。 最終的にこの演習で下記のようなSVGファイルを完成させますが、 自分自身で頑張って作成してください。演習中にSVGファイルの動作状況を 示します。
今回作成する地図データの見本
各建物をポリゴン化して表示させます。使用するSVG要素は、 polygonでも pathでも構いません。 ここで作成したポリゴンは、後日JSPを使ったWebページ上で検索結果を 動的に表示させるために使用します。
また、各建物には、下記のようなidをつけてください。
下記にポリゴンの記述例を示しますので、参考にしてください。 下記の例では「animateColor」を用いて繰り返し色を変化させていますが、 「animateColor」をつけるつけないは自由に選択してください。
本館棟 (id例:1)の記述例
<g id="1">
<path d="M 370 150 L 350 185 L 350 202 L 427 217 L 443 182 L 442 158 z"
style="fill:black;fill-opacity:.6">
<animateColor attributeName="fill" attributeType="CSS" fill="freeze"
from="black" to="yellow" dur="5s" repeatCount="indefinite"/>
</path>
</g>
上記の建物データを取り込んだ、campusmap.svgの記述例を下記に示します。 GIF画像はSVG化せず、画像のままとしてリンクを張って表示させるという方法を 採っています。
campusmap.svgの記述例 注意：Unicodeで保存するように
<?xml version="1.0"?>
<svg width="634" height="414" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="634" height="414" xlink:href="campusmap.gif"/>
<g id="1">
<path d="M 370 150 L 350 185 L 350 202 L 427 217 L 443 182 L 442 158
z" style="fill:white;fill-opacity:.6">
<animateColor attributeName="fill" attributeType="CSS" fill="freeze"
from="black" to="yellow" dur="5s" repeatCount="indefinite"/>
</path>
</g>
</svg>
この演習で作成し、各建物をポリゴン化してあること SVGファイル、campusmap.svgをWeb上で 閲覧可能とするように設定せよ。
表示確認は、Webブラウザ上でURLを
のように指定することで行う。campusmap.htmlのソースは、単にcampusmap.svg を読み込むだけのもので十分であり、以下にソースの見本を示す。
<html> <body> <embed src="campusmap.svg" name="campusmap.svg" width="700" height="500" type="image/svg-xml" pluginstage="http://www.adobe.com/svg/viewer/install/" /> </body> </html>
SVG Catsというソフトウェアをインターネットからダウンロードできます。 SVG Cats 1.1はフリーウェアですが、最新バージョンの2.2は「広告型シェアウェ ア」だそうです。広告があるホームページに記載されている無料のキーナンバー を入力すれば、何度でも試用期間を延長できるそうです。
このSVG Catsを使うと、座標値を確定するのに多少早くなりますが、私の個人的 な感想では、テキストエディタで試行錯誤しながら入力した方が早いと思います。 いずれにしても、自分自身で試してみてください。
を自分自身のディレクトリに保存してください。特に考えがなければ ~（ホームディレクトリ）にでも保存しておきま しょう。
保存後は、SVGCats.exeをダブルクリックして起動してみま しょう。そして基本操作の練習を行います。