10年前の簡易SVG体験ツールを、応急処置で動かしてみた。ロジックヴィジュアル、サウンド、テキスト、コードの間を彷徨いながら、感じたこと考えたことを綴ります。10年前の簡易SVG体験ツールを、応急処置で動かしてみた。2011/08/16前回の記事では、ベクトル・データのイラストの作成方法について述べました。テキストを読むより、実際に作図してみた方が分かりやすいですよね。Designで作成できますが、SVGに関心をお持ちの人も多いでしょう。本格的なイラストや図を作成するドローソフトはいくつかありますが、デザイナーやイラストレーター以外の人も気軽に試せるようなツールもあった方がいいかもしれないと考え、10年前に私が作成した簡易SVG体験ツールに応急処置を施して、現環境で動作するようにしてみました。HTAにつき、ダウンロードして解凍するだけ、インストールは不要です。ポリゴンや直線程度ですが、W3C準拠のシンプルなSVGを書き出します。作成したSVGはWebページのアクセントや、サンプルの素材として使えるかもしれません。プログラムのリメイクや応用は自由です。10年前の旧仕様に基づくVBScriptコードにつき、参考にはならないと思いますが。以下、概要と操作手順を、2回に分けて書きます。対応・応急処置版)概要SVGトレーサー「てんてん」は、SVGを体験していただくための、簡易SVG作図ツールです。「動いてなんぼのXML」でSVGについて解説したのですが、W3C準拠のSVGを書き出すツールがなかったため、読者用に作ったものです。か所だけ応急処置を施しました。ソースコード全体の見直しはしていませんが、ひととおり動作するため、体験目的には利用可能と判断し、ダウンロードできるようにしました。ツールの画面上でそのまま作図するか、任意の画像を下絵にしてトレースすると、SVGファイルが自動生成されます。簡易ツールにつき、要素が増えると重くなります。作図できるのは、次の図程度までです。ファイルに埋め込むことができます。各オブジェクトからリンクを張ることができます。次の例では、青色のオブジェクトから、別のHTMLファイルにリンクしています。9があれば、サンプルを閲覧できます。ファイルへのSVGファイルの埋め込み方法は次の通りです。インストールされていればWindowsは以前のバージョンのものでも動作すると思います。OSについては不明です。Macでは動作しません。対応応急処置版)zip圧縮しています。ダウンロードできたら、右クリックして表示されるショートカットメニューの「プロパティ」を開き「ブロックの解除」OK」をクリックします。その後、解凍(展開)してください。インストールは不要です。※プログラムファイルは、セキュリティツールでチェック済みですが、不安でしたら、ダウンロードした後、お手持ちのセキュリティツールで再チェックしてください。※お使いになる場合は必ず本ページからダウンロードしてください。知らない人からリメイクしたプログラムを譲り受けて使うことは避けてください。作図領域は、幅500px以内です。/連続線、テキストの作図と、各オブジェクトからのリンクです。保存されるSVGファイルの文字コードはUTF-16です。矩形や楕円や自由曲線の作図機能はありません。アンドゥ・リドゥ機能はありません。一度作成されたSVGファイルの読み込みと編集、保存先フォルダやファイル名を指定する機能はありません。本ツールは雑誌記事のサンプルであり、最低限のエラー処理しか書いていません。体験用につき、保証やサポートや機能追加はありません。解凍してできた「TenTen_08e.hta」をダブルクリックして実行します。初期画面では、方眼紙が敷かれています。(作図を始める前に)Cドライブに、ugoiteNanbo\displayというフォルダを作成してください。このフォルダを指定して保存する処理を書いていますので、このフォルダがなければ動作しませんから注意してください。方眼紙を使うのではなく、任意の絵や写真をトレースしたい場合は、下絵とする画像ファイルを用意してください。左右幅500pixel以下のものです。※ツールにはgif画像と書いていますが、png形式のファイルも使えます。[参照]ボタンをクリックして、下絵とする画像ファイルを選択してください。※自由に作図する場合は、付属の「画用紙.gif」を利用して下さい(ただの白紙ファイルです)。Comment(0)最新の投稿フリースを封印した日。絵を描き、詩を書き、曲を書き、文を書き、企画書と仕様書を書き、コードを書き、思索を続ける、四国の人。思い出が、未来が、消える。ライフログを無効化する、香害。~嗅覚センサーを見直そう(18)~カフェの閉店に見る、飲食店の社会的役割。~嗅覚センサーを見直そう(17)~香害蔓延社会。