SVG (FreeTool)

「てんてん」は，CADや（SVG形式でのエクスポートをサポートしている）Illustrator9.0jでの作図経験がない人でも，誰でも手軽に，SVGファイルを作成できる簡易ツールです．IE上に表示されたGIF形式などの画像ファイルを下絵にして，トレースすると，取得された座標値をもとにしたSVGファイルが自動生成されます．クリッカブルマップをSVGに変えたい，SVGファイルを使ってWebページを作りたいなどの目的に使うことができます．
SVGファイルを表示するには，SVGビューワが必要です．これは，Adobe社のサイトからダウンロードすることができます（本ページ下からリンク）．
お手持ちの画像をトレースして遊んでください．このツールはダウンロードして解凍するだけで使えます．
Windows98+IE5.5+SVGビューワ1.0，Windows98+IE6.0beta+SVGビューワ2.0，WindowsMe+IE5.5+SVGビューワ2.0，WindowsNT4.0+IE5.5+SVGビューワ2.0で試しています．いずれも400MHz〜800MHzのマシンです．SVGはかなり重いので，スペックがないとキツイかもしれません．トレース中に，あまりにも動作が重く感じるようになってきたら，出来たところまでを保存してください．
もし不具合等ありましたら，担当までご連絡いただければ幸いです．
．．．という割には，不具合に対する保証もサポートもありません（苦笑）．

このツールは，下図のように下絵をトレースすると，


のようなSVGファイルが作成できるというものです．それだけですが（汗）．
このSVGファイルを作成するのに要した時間は10分〜15分です．
この元画像は，「Helper for Human2000」に使っているものです（「XML＋XSLサンプル集」サンプル45参照）．「てんてん」では，作図中に，各オブジェクトからのリンク先を指定することができます．この作図されたSVGコードの見本を参照してください．SVG宣言は最新のもので，UTF-16で保存されます．グリーンの多角形をクリックすると，高齢者の似顔絵が表示されます． サンプルSVG「Helper for Human2002のための図」

次回の「OPEN DESIGN」（8月24日発売）の連載「動いてなんぼのXML」には，「XSLTとSVGによるOfficeXPデータの活用」というテーマで書きました．9月発売号にも，引き続き，同じテーマで書く予定です．それで，ハタ！と気付いたこと．読者が自分なりのサンプルSVGファイルを作って試したくなったら，SVGファイルをどうやって作るの？
読者全員がIllustrator9.0jを持っているとは限りません．さらに，わたし自身はIllustrator9.0jを持っているのですが，イラストの仕事自体には，Illustrator7.0jのほうがサクサク動くので，7.0を使っていることが多いのです．そのようなわけで，「じゃ，なんか簡単作図のツールを作ればいいんよね」と，単純に考えました．
で，作りました．わたしは，プログラマじゃないから，コードを書くのに時間がかかります．だから，3日かかってしまいました．
そのうえオッチョコチョイで，打ち間違いをしては，「動かなくなったー」といって騒ぎ，相方を呼ぶ．で，相方が動作を見て，「ここのエラー処理くらい書いてあげれば〜」とのたまう．そんなこんなで，まだ作りこみは浅いですが，少なくとも，座標取りは便利になります．
これは，ツールというよりサンプルなので，このコードについては，9月24日発売の「OPEN DESIGN」で解説したいとおもっています．そのため，現時点では，ソースコードはエンコードして見られなくしていますがご容赦ください．

TenTen_08e.lzh（28KB）をダウンロードして，解凍してください．4個のファイルが出来ます．TenTen_08e.htaがプログラムファイルです．image.gifは，見本用の画像ファイルです．color.htmは，色指定の際に便利なKySSオリジナル分類カラーチャートです．tenten_logo.gifは，プログラムに貼ったロゴです．この4個のファイルを，C\ugoiteNanbo\displayというフォルダを作成して，その中にコピーしてください．（「OPEN DESIGN」読者の方には，おなじみのフォルダです）
起動する前に，トレースする画像ファイルを用意してください．左右500pixel以下のサイズのGIF画像ファイルを準備します．
TenTen_08e.htaをダブルクリックして実行します 図1

[参照]ボタンをクリックして，トレースする画像ファイルを選択します． 図2
画像ファイルが下絵として表示されます． 図3
トレースするのではなく，1からお絵描きしたい人は，画用紙.gifか方眼紙.gifを使ってください．

はじめに，必ずトレースする対象の形状を選んでください．最後に描画したものほど前面になるので，順番を考えてトレースしてください．トレース対象の内容は，マウスオーバーで表示されます． 図4
ポリゴンでは，角が切れ込んだ図形を作図できますが，多角形では，角が5角形や6角形のような形状のものしか作図できません．作図したい図形に合った機能を選んで使ってください．なお，多角形では，青の部分をトレースする必要はありません．1個の多角形を作図する度に，自動的に終点が閉じられます． トレースする対象の形状をクリックして選択します．図6_1

トレースする画像上をクリックして，座標を指定してください．
多角形の場合は始点と通過点の各点を次々クリックしてください．※図形を閉じるために始点を再度クリックする必要はありません．テキストの場合は開始点（左下隅）をクリックしてください．円の場合は中心点をクリックしてください．指定した座標は，画面左下のウィンドウ内に次々表示されます．
多角形を作図する場合は，計算して描画するために重くなりがちなので，オブジェクト数が数十個を越えると，反応が遅くなる場合があります．座標がとれているかどうか確認しながら作業を進めてください．あまり重くなった場合は，作業を中断し，出来たところまでを保存してください（あくまで簡易ツールです）． 図6_2

リンク先，ID，塗り色，線の色，線の太さ，テキスト，半径の属性値を設定することができます．これらの，表示されている項目のうち，リンク先以外は，すべて入力してください．リンク先には，描画した図形をクリックした時，リンクして表示するファイル名を絶対パスまたは相対パスで指定します．リンク先を指定しない場合は，リンクは張られません．特に，IDは必須です．別になくても動作に影響はないのですが，SVGのメリットを考えれば，後々ファイルを利用するときに必要なIDは，付けておくべきだとおもったので，必須にしました．
色は，16進数で指定してください．16進数が分かり難い場合は，「カラーチャート」をクリックすると，カラーチャートが開くので，使いたい色の16進数の値を，マウス右クリックで表示されるショートカットメニューを使って，入力ボックス内にコピー＆ペーストするとよいでしょう．図7

1個のオブジェクトを作図できたら，[1個の作図完了]ボタンをクリックしてください．
図8_1
[1個の作図完了]ボタンをクリックすると，ここまでで作成されたSVGのコードを確認することができます．この表示ボックスの中は編集可能領域となっているので，色等を変更したい場合で，手入力OKの方は，直接コードを編集することもできます．編集したコードは，画面上のトレースには反映されませんが，SVGファイルとして保存することはできます．図8_2
続けて作図する場合は，再度「トレース対象の形状の選択」から繰り返してください．1個の図形を作図する際には，必ず，トレース対象の形状を選択してください．図8_3

トレースが完了したら，[座標値を保存]ボタンをクリックして保存してください．図9
SVGビューワによって，IE5.5のウィンドウ内に，作成したSVGファイルが表示されます．
図12
SVGファイルは，すべて「C\ugoiteNanbo\display」に保存されるので，作成したSVGファイルを使いたい場合は，他のファイル名に変更しておいてください．このプログラムを試す度に，同じファイル名で上書きされてしまいます．

文字サイズや書体を変更したい場合は，作成されたSVGファイルを，Windows98以降のワードパッドや秀丸などUnicodeを扱えるテキストエディタで開き，CSSを追加してください．MacのIllustratorユーザにはおなじみですが，書体名は「ＭＳ明朝」ではなく「MS Mincho」です．そのように書かなければ反映されません．図11

こういう気軽なツールは，「シンプル is ベスト」なので，多機能にするつもりはありませんが，何点か追加したい機能があります．いつになるかな？（^ ^;）