手書きSVG
2005-05-11-3
[Programming][Mimitako]
データフォーマットを理解するにはやはり手書きが一番!
ということで、
スンマ/無料チュートリアル <http://www.summa.jp/tutorial/> の
「SVG実習マニュアル」を読みながら、SVGを手書きしてみました。
エディタでいじってはビューワで確認するという作業を繰り返し、なんと
かミミタコが描けました(ちょっと変ですが)。座標指定が大変だったよ。
もちろん、仕組みを理解するだけならチュートリアル読むだけで十分だし、
絵を描くだけならSVG対応のお絵描きツールを使えば済むわけなのですが、
やはりわざわざXMLを手書きすることでSVGについての理解が深まるんじゃ
ないかなかと思っています。どうだろう?
以下、SVGビューワーがないと見れません。Adobeのサイトから無料で入手
できます。
<http://www.adobe.com/svg/viewer/install/main.html>
(1) ミミタコ静止画
<http://chalow.net/misc/svg.cgi?mimitako.svg>
(2) ズーミングアニメーション
<http://chalow.net/misc/svg.cgi?mimitako2.svg>
(3) クリックで背景色が変わる
<http://chalow.net/misc/svg.cgi?mimitako3.svg>
SVG 中で ECMAScript (JavaScript) が使えるのが面白いです。(3) で使っ
ています。いろいろ楽しいことが出来そうです。
追記050512:
すると良いですよ」とのアドバイスを頂いたので、CGI経由で表示するよ
うにしました。うまく行っているようです。感謝!
以下、やっつけCGI(svg.cgi)のソース:
ということで、
スンマ/無料チュートリアル <http://www.summa.jp/tutorial/> の
「SVG実習マニュアル」を読みながら、SVGを手書きしてみました。
エディタでいじってはビューワで確認するという作業を繰り返し、なんと
かミミタコが描けました(ちょっと変ですが)。座標指定が大変だったよ。
もちろん、仕組みを理解するだけならチュートリアル読むだけで十分だし、
絵を描くだけならSVG対応のお絵描きツールを使えば済むわけなのですが、
やはりわざわざXMLを手書きすることでSVGについての理解が深まるんじゃ
ないかなかと思っています。どうだろう?
以下、SVGビューワーがないと見れません。Adobeのサイトから無料で入手
できます。
<http://www.adobe.com/svg/viewer/install/main.html>
(1) ミミタコ静止画
<http://chalow.net/misc/svg.cgi?mimitako.svg>
(2) ズーミングアニメーション
<http://chalow.net/misc/svg.cgi?mimitako2.svg>
(3) クリックで背景色が変わる
<http://chalow.net/misc/svg.cgi?mimitako3.svg>
SVG 中で ECMAScript (JavaScript) が使えるのが面白いです。(3) で使っ
ています。いろいろ楽しいことが出来そうです。
追記050512:
IE だと http://.../*.svg をそのままクリックするとなぜか XML ファイと書いていたのですが、 mala 氏から「content-typeをimage/svg+xmlに
ルとして処理してしまうので、リンクを右クリックし拡張子を .svg に
変更しローカルに保存してから開いてみて下さい。(はまった…)
すると良いですよ」とのアドバイスを頂いたので、CGI経由で表示するよ
うにしました。うまく行っているようです。感謝!
以下、やっつけCGI(svg.cgi)のソース:
#!/usr/bin/perl my $fn = shift @ARGV; die if ($fn !~ m{^[a-zA-Z0-9_\-]+\.svg$}); print "Content-type: image/svg+xml;\n\n"; if (-e $fn) { open(F, $fn); print <F>; close(F);}
この記事に言及しているこのブログ内の記事