前に試したのはRetinaを強く意識したものだけど、今度はCSSスプライトの代替を意識したもの。CSSスプライトの欠点のひとつに繰り返し背景を含めることが出来ないというのがあって、それをどうにか出来ないかなーと思ってSVGを使ってみたけど出来なかったという話。
Demo: Combine Multiple PNG Images with SVG
CSSスプライトのHTTPリクエストの節約が最大の目的なので、それを崩す事の無いようにリンクは使わずData URIを使ってPNG画像を埋め込んだSVGを扱っている。デモの末尾に載せたようにFirefox 13だけうまくいく。Internet Explorer 9もそれぞれの画像のサイズを揃えればいける。Chroem 20とOpera 12はSVG自体の表示は可能だけどCSSからbackground-imageプロパティーを使って参照するとアウト。外部のリソースを参照しているという扱いなんだと思う。
-webkit-image-set()関数のような択一ももちろん必要だけど、-moz-image-rect()関数のような切り出しも必要だと思う……と思ったら、CSS Image Values and Replaced Content Module Level 3のimage()関数はどっちにも使えるようなものにするようだ。Media Fragments URIでfoo.png#xywh=0,32,32,32とか出来ないかなーとかちょっと考えてたんだけど、やはり切り出しの方はそれでやるようになるみたい。これは楽しみ。
SVGばっか書いている気がする。そして実装のバラつきに枕を濡らす。Mっぽい。