Melog

FireFoxが1.5でSVGに対応したとの事で、少しSVGについて調べてみる。
まずその記述方法について調べてみたけど…いやー、これはさすがに自分で入力して描くのは大変そうだ(笑)。そこで、SVGを作成できるツールについて調べてみる。Windows対応のソフトを色々探してみたけど、フリーで使える物にあまり良さそうな物が無いねぇ。頼みの綱の「OpenOffice.org」の「Draw」が吐き出すSVGは、何故かブラウザで出力できなかったし。どうも、この辺の対応は中途半端っぽい。結局、「Illustrator」が一番使い易そうという結論になってしまう。つまりこれは、SVGを使う環境がまだまだ全然整ってないという事なんだろうなぁ。

ブラウザの方の対応に関しては、プラグイン対応を除くと今のところFirefox、Operaが標準対応しているぐらいなので(調べてみたけど、Safariは標準対応してない…のかな？)、こちらの環境に関してもまだまだという感じ。IE7がどう出るのか…。
ちなみに、非対応への対策はあるのでSVG画像を使う上ではあまり問題ない。

<object data="test.svg" type="image/svg+xml" width="100" height="100">
<img alt="SVG画像をPNGに変換した画像" src="test.png" width="100" height="100" />
</object>

こんな感じで、SVG画像を指定したObject要素の内側に、SVGをPNG等に変換した画像をimg要素で配置する事で、非対応のブラウザにも対応できる（ちなみに、object要素でpngを表示させようとすると、IEがきちんと表示してくれない）。XHTML内部にSVGを埋め込む場合は…どうなんだろ。そもそも、試してみたところXHTML内部にSVGを埋め込むとFirefoxでもOperaでも正しく描画されなかったので、この方法は色々と問題がありそう。

ところで、Opera 8.5のSVG実装は何か挙動が非常に怪しい感じがするのだけど。
Firefoxで読めたSVGが、Operaで読めなかったことが度々あったので、何かおかしいと思って色々調べていたら、何故かtext要素で文字を配置すると、それ以降が全部無視されてしまうという現象が起こる（正確には、x,y属性を指定すると）。あと、背景色を何も指定しなければ、背景って透明になるんじゃないの？白色で塗りつぶされてしまうんだけど…。

例

色々試してみた。
まず、以下のソース。この場合はSVG画像に未対応だと注意書きが表示される。

<object data="https://melog.info/archives/items/2005/20051201_svg_1.svg" type="image/svg+xml" width="240" height="240">
<em class="attention">現在の環境ではSVG画像は表示できません。</em>
</object>

次に、SVG画像に未対応だと代替のpng画像を表示させるソース。

<object data="https://melog.info/archives/items/2005/20051201_svg_1.svg" type="image/svg+xml" width="240" height="240">
<img alt="代替画像" src="https://melog.info/archives/items/2005/20051201_svg.png" width="240" height="240" />
</object>

もっとも、今現在ここまでしてSVGを使うメリットがあるのか？と言われると困るのだけど(笑)。まぁ、確かに拡大縮小が容易だったり、再利用しやすいという点はあるけどね。また、図形によってはPNG等の画像よりずっと小さなファイルサイズになるというメリットもある。

あと、試しにブラウザのサイズに追従するSVG画像も作ってみようとしたけど、これはどうも（自分の知識では）無理っぽいね。表示上の高さが追従してくれない。これは、SVGの内部で表示上の大きさを指定してないから、普通の画像みたいにスタイルシートで横幅だけを伸ばしても、アスペクト比を保って高さが拡大されるという事がない。何か良い解決策は無いものだろうか…。そもそも、これはSVGの表示方法として正しいんだろうか？
一応参考までに、以下の画像は上がSVG画像、下は比較のためのPNG画像。Firefox1.5ユーザーは、ウィンドウを拡大したり縮小したりしてみると、何となく理解していただけるかと。
ちなみに、どうもSVG内部でサイズ指定に”%”を使うと、Opear 8.5ではSVG画像が見られなくなる模様なので、以下のSVG画像はOperaでは表示されない。