2011年3月8日火曜日

今使っているブラウザでsvgの内部スタイルシートが表示されるか?

ラベル: 時刻:

たまに描くsvg、inkscapeで編集することが多いです。 inkscapeはスタイル情報を全てインラインスタイルで保持してしまいます。 内部スタイルシートっていう仕様があるのは知ってましたが、今使っているブラウザでそれが表示されるか試した事がありませんでした。 ってことで試してみました。

svgのコードは手入力でこんなのを用意。 

<svg width="160" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <style type="text/css"><![CDATA[
        .s0 {
            fill:chocolate;
            stroke:brown;
        }
        .s1 {
            fill:powderblue;
            stroke:none;
        }
    ]]></style>
    <rect x="10" y="10" width="20" height="100" class="s0"/>
    <rect x="50" y="10" width="20" height="100"/>
    <rect x="90" y="10" width="20" height="100" class="s1"/>
    <rect x="130" y="10" width="20" height="100" class="s0"/>
    <ellipse cx="80" cy="60" rx="60" ry="30" class="s0"/>
</svg>

こんな絵が表示されるはず。 (↓はpng画像)

黒い四角がスタイル適用なし、それ以外は内部スタイルシートで装飾してます。 次のブラウザで見たらちゃんと表示されました。

  • Firefox 3.6
  • Google Chrome 9
  • Opera 11

inkscapeで描いたsvgを省サイズ化する場合、まったく同じスタイルのpathとかrectとかをこのやり方でまとめてもちゃんと表示できるってことですよね。 う～ん、理屈ではそうなんでしょうけど、面倒くさいかな?

そろそろFirefox4とかie9とかが正式リリースされますよね。 そうなったらそっちの表示も確認しないと、この手のネタが片手落ちの投稿になってしまいます。 でも、古いマシンだからie9は試せないんだよなぁ...

どうしましょ?

投稿者