2001年4月22日に行われた「Mozilla.Party.JP 2.0」での小セッション 「Mozillaで楽しむSVG」の中で、なぜか私も少しだけしゃべってきました。 その時はまとまった資料を用意している時間が無かったので、 セッション中に得られた情報と合わせて、少しまとめておこうと思います。
現在、mozilla.orgで配布されている0.8.1バイナリのうち、 例えば以下のものがSVGに対応しています。 LinuxのDistributionによっては、 標準でSVG対応バイナリが入っているものもあるそうです。
以下は、Mozillaで表示できるSVGの例と、そのソースです。 [表示]
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="sample.css" type="text/css" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.svg">
<g>
<polyline x="0" y="0" points="50 0 0 100 100 100"/>
<polygon x="150" y="0" points="50 0 0 100 100 100"/>
<polygon x="0" y="0" id="star1" points="350 75 379 161 469 161 397
215 423 301 350 250 277 301 303 215 231 161 321 161"/>
<polyline x="0" y="0" id="star2" points="350 75 379 161 469 161 397
215 423 301 350 250 277 301 303 215 231 161 321 161 350 75"/>
</g>
</svg>
polygon[id="star1"] {color: yellow;}
polyline[id="star2"] {color: red;}
MozillaでSVGを表示させるためには、svg要素に 「http://www.mozilla.org/keymaster/gatekeeper/there.is.only.svg」 という名前空間を指定する必要があるようです。 この指定が無いと、画面に何も表示されません。
polygonやpolylineのpoints属性で指定する座標リストは、 SVG仕様では「,」で区切ることも可能ですが、 Mozillaではスペースでないと認識しないようです。
Mozillaでは、外部スタイルシートを使って、図形に色を付けることが可能です。 インラインでのstyle属性は使用できないようです。
色の指定には、polygon、polylineともcolor属性を使用します。 polygonでは多角形の中身が、polylineでは線が、指定した色で描画されます。 SVG仕様ではstroke属性やfill属性を使用するようですが、 これらを指定しても無視されてしまいます。 また、色の指定は、図形に指定したidごとに行うことが可能です。
Mozillaでは、1つのXMLファイル中にXHTMLとSVGを混在させて記述したものを、 それぞれ解釈して表示させることが可能です。 [表示]
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.svg">
<body>
<p>
下の三角形はSVGで描いています。
</p>
<svg:svg>
<svg:g>
<svg:polyline x="0" y="0" points="50 0 0 50 100 50"/>
<svg:polygon x="150" y="0" points="50 0 0 50 100 50"/>
</svg:g>
</svg:svg>
<p>
ちゃんと表示されているでしょうか？
</p>
</body>
</html>
上記はXHTMLの中にSVGが入っている例ですが、逆にSVGの中にXHTMLを入れても、 一応それらしく表示してくれます。 W3Cからリリースされている「Amaya」では、 この形式の複合文書を表示しようとするとエラーになってしまいますので、 この点ではMozillaが現在勝っていることになります。 [表示]
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.svg">
<g>
<polyline x="0" y="0" points="350 75 379 161 469 161 397 215 423 301 350
250 277 301 303 215 231 161 321 161 350 75"/>
</g>
<foreignObject width="200" height="100" x="300" y="200">
<div xmlns="http://www.w3.org/1999/xhtml">
polylineはSVGかな。
</div>
</foreignObject>
</svg>