今更だが、SVGについて勉強中である。SVGではいろんなことができ過ぎるので、何ができて何ができないのかがよく分からなくなる。一般の人はテキストエディタでがりがりSSVGのソースを書く人もそうはいないだろうが、プログラマの端くれとしてはそんなものくらいは手で書けないといけないのである。

というわけで、しばらくはファイルを書いては表示してみる、ということを繰り返していたのだが、どうにも面倒だ。それぞれの要素がどんな属性を持っているのか、そしてその属性の値を変えたらどのように表示が変わるのか、そんなことを手軽にわかるようになっていればいいなと考えた。

SVGはDOMレベル2に準拠したJavaScriptのインタフェースを持っているので、HTMLと違ってプログラムによるデータ構造へのアクセスが簡単である。そいつとHTMLのフォームを使って属性値を変えるしくみを作ってみた。これでいちいち属性値の効果を調べるために新しいSVGファイルを作っては読み込み、ということをしなくても済む。実のところ、Netscape Navigatorでは、何度もプラグインを含むページを再読み込みすると、だんだんプロセスが肥大化して重たくなってしまうという問題が起こっている。かといってInternet ExplorerではJavaコンソールが使えないし、JavaScriptのエラーメッセージも頓珍漢なアラートダイアログを出すだけなのでデバッグには不向きだ。もっとも致命的なのはSVGプラグインとブラウザとのインタフェースがないことである。

そんなわけで、このページはNetscapeを使えばスクリプトが動作して、多少は役に立つはずだ。I.E.の人は単純な図形が表示されているだけで、何も面白くないだろう。それはどうしようもないことなので、ご容赦願いたい。みんなI.E.を使っているのに、それではSVGって役に立たないの？と思う人もいるだろうが、それは違う。少し制約があるだけで、このページのようなことをしようと思わなければ問題ない。

'line'要素

線の色が薄いんじゃないかと思われるだろうが、実は最初に見えているのは線そのものではない。これは、属性値のデフォルトがfill="black"、stroke="none"になっているためである。なんかこれはおかしい感じだ。フォームでstroke="black"とすると、ちゃんと濃い線が表示されるだろう。好きな色を入れてみて欲しい。ちなみに、色は名前でも指定できるが、"#FF8844"のようにRGBの数値でも指定できる。透明度は0から1の小数値で指定する。

stroke-linecapは線の先端の形だ。この大きさだと良く分からないだろうから、SVGビュアーの右ボタンクリックでメニューを出し、「ズームイン」で拡大してみて欲しい。stroke-linecapには"butt"、"round"、"square"が指定できる。それぞれ入力して違いを確かめて欲しい。

'rect'要素

<line>と似たような属性だが、角の丸みを指定できる。

'circle'要素

'ellipse'要素

'path'要素

'polyline'要素

'polygon'要素

<polygon>要素はいわゆる多角形で、<polyline>の閉じたものである。これも<path>の"d"属性の最後に"Z"を指定して閉じてやることで代用できる。

以上が、SVGの基本要素の一部である。'text'要素とか、'filter'要素とか、'transform'属性なんかについてはまたいずれ書きたいと思っている。