2012-06-25

SVGで複数の画像をまとめる

アイコン(image/vnd.microsoft.icon)のような複数解像度をまとめる仕組みを考えている。SVGを使ってアイコンとほぼ同等なんじゃないかみたいなことは比較的簡単に出来たけど、全部の画像をリクエストしてしまうので使いものにはならなそう。というメモ。メモ多い。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css">
      <![CDATA[
        image {
          display: none;
        }

        @media screen and (-webkit-max-device-pixel-ratio: 1.999) {
          #x1 {
            display: inline;
          }
        }

        @media screen and (-webkit-min-device-pixel-ratio: 2) {
          #x2 {
            display: inline;
          }
        }
      ]]>
    </style>
  </defs>
  <svg viewbox="0 0 180 180">
    <image
      xlink:href="default.png"
      id="x1"/>
  </svg>
  <svg viewbox="0 0 360 360">
    <image
      xlink:href="retina.png"
      id="x2"/>
  </svg>
</svg>

PNG画像へのリンクだけを含むSVG画像を複数まとめて、Media Queriesで分岐するというもの。viewbox属性を怠らなければ適切なサイズでブラウザーには表示されるはず。img要素でもCSSからでも使えると思う。とりあえずな感じなのでdevice-pixel-ratioを使ったクエリーでやってみたけど、将来的にはresolutionとdppx単位の組み合わせになりそう。

直接参照するのではなくSVGでは透明なrect要素で幅と高さを確保するにとどめておいて、メディアクエリー内で背景として仕込むみたいにすればリクエストも必要なものだけになるような気がする……けどもう飽きた。

ありものでできればimg要素のsrcset属性や-webkit-image-set関数のpolyfill的なものを作れるかなーと思ったけど、まぁそううまくはいかないか。