2012-05-29

HTML -> CSS -> SVG -> CSS

HTMLで参照しているCSSでSVGを参照する……まではマイナーとはいえ使っている人はいると思う。これでまぁスケーラブルな画像という条件は満たせるのだけど、せっかくSVGではCSSを参照できるのだから、そのCSSでSVGのスタイルも指定できたら色々便利でリソースの節約にもなるんじゃないかという実験……が失敗に終わった話。タイトルわかりづらい。

Demo: HTML -> CSS -> SVG -> CSS

SVGでCSSを使う方法は簡単で、<?xml-stylesheet?>を使うだけ。CSSでスタイルを書きやすくするためid属性を指定しておくと良い。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="test.css"?>
<svg id="foo" .../>
  ...
</svg>

これでまぁSVGを直接書き換えることなく簡単な変更、例えばfillプロパティーの調節とかそういった事ならCSSで行えるようになるわけだけど、HTTPリクエストが1つ増えることになる。そこでHTML側で参照しているCSSにSVGのスタイルも混ぜ込んで、SVG側からもHTMLと同じCSSを参照してやれば良いのではないかと考えた。CSSを統合するとSass等を使っているのならカラースキームの流用などもできることになるのでより便利では！

として上記デモを書いて実験してみたら思わぬ結果に終わった……。期待通りに動いたのはOpera 11だけという結果に。Chrome 19とFirefox 12ではスタイルが反映されず(SVG単体で表示した場合は反映されるのでCSSの問題では無さそう)、Internet Explorer 9ではスタイルは反映されるもののCSSのが二回リクエストされるバグがあった。Ch19とFx12の挙動はバグなのかどうなのかわからない。想像できる理由はいくつかあるけど単なる憶測なので書かない。

仕様がどうなっているにせよHTML文書とSVG画像でCSSを共有するというのは期待通りにいかなそうなので避けた方が無難という感想。ライフ・チェンジングするアイディアだと思ったのにな……。