ブラウザで絵を描こう-SVG+JavaScript

はじめに

画像のSVGは、FLASHやJAVAやPNGやJPEGと違って、自分自身を編集することができます。AJAXというものもありますが、このページでは、実験的に、SVGという言語を使って、SVGを描くことのできるDrawツールをつくりました。

とりあえず、Drawツールの名前を「JET」と名付けておきます。

更新した機能

自由曲線を描いたり、編集できます。
ここで言う自由曲線とは、3次ベジェ曲線のことです。

JETでできること

図形の作成と編集（拡大縮小、反転など）
色の編集
SVGの出力、編集
透明度の調整
四角、角丸四角、円、だ円、折れ線、多角形、自由曲線を描くことができる
六角形（Adobe SVG Viewerでは、SVGを表示、つまりView SVGにして、キーボードの上や下ボタンを押して三角形などにできます）が描ける
折れ線の操作

保存方法

作った絵を保存するには、Adobe SVG Viewerならば、「SVGを保存（Save SVG As」で保存できます。(バージョンは6でチェックしています）

Deer Park Alpha(2005年7月現在のfilrefoxのアルファ版）をお使いの方は、左下にある白い四角をマウスでクリックしてみてください。そうすると、ソースが表示されるので、それをコピーして文書エディターに貼り付けてください。「ページを保存（Save Page As)」でエディターそのものは保存できます。

ダウンロード

こちらからダウンロードできます。自由に改良してください。textファイル（.jsや.svgとはなっているが）なので、普通の文書エディター(UTF-8対応）で編集できます。

スクリプトの部分draw.js(約56k)

上のスクリプトだけでは動かないので、SVGファイルもダウンロードしてください。jet.svg(約5.6k)

補足

Firefox1.5でも作動を確認。Opera9(テスト版)でも不安定ながら動きます。

こちらは、Flashを使ったドローツール。SVGを出力、保存されていますhttp://d.hatena.ne.jp/kambara/20051228

＞＞SVG学習辞典へ戻る

＞＞ホームへ戻る