SVG導入のためのレガシーブラウザ振り分け
やっと少しずつ現実的になってきた、webで使える夢のベクター画像SVG。拡大し放題だししかもテキストデータでXMLだわ容量小さいわってことで何ともかわいいヤツ。 当方ものすごくSVG好きです。
SVGが使いたい
もともとサイトの素材画像はIllustatorで作ってたのもあり、実はローカル環境ではだいぶ前から画像はSVGにしてたんだけど、webでってなるとやはりネックになってくるのが、いつもの我らがInternet Explorer。caniuse.comによれば、SVG画像を普通の画像と同じ様に扱えるのはどうやらIE9以降。いくらなんでも現時点で8を切るわけにもいかず、SVG導入は将にIE待ち状態。いつも通りです。しかたなくSVGクオリティーはローカルで個人的に楽しむにとどまり、webに上げる用は別途PNG-24に書き出してました1。
それでもヘッダの蛙ちゃんとかサイトロゴとかポイントになってて且つ管理しやすい部分はPHPとかCSSの方で振り分けてモダンブラウザにはSVGを渡すようにしていたのですが、いかんせん個別対応なので全部に対してやるのはしんどいしソースも汚くなるから最低限しかやってなかった。
しかしiPadもRetinaになり今後本格的にHiDPI時代がやってくるかと思うと、そろそろさらりと一足先に対応しておきたいところです。もう我慢できん。
で、「てかそもそもApacheが画像渡す時点で選別してもらえばいいんじゃん！」と気付き .htaccess で振り分けることにした。
.htaccess で Apache にやらせよう
つまり、今まで普通に画像を入れていたディレクトリの画像を本格的にSVGに入れ替えてしまい、SVGに対応しているモダンなブラウザは普通のそっちの画像を取りにいかせる。もうデフォルトはSVG。で、その一方でレガシーブラウザ用に、メインの画像ディレクトリと同じディレクトリ構造のPNG画像版を作り、そいつらが拾いにいった画像がSVG(Z)なら .htaccess で振り分けてリダイレクトをかける2。
というわけで画像を入れてるディレクトリの .htaccess にこんな感じのことを書く。
# rewrite SVG -> PNG for legacy UA
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "MSIE [4-8]" [OR]
RewriteCond %{HTTP_USER_AGENT} "Firefox\/3\."
RewriteRule ^(.*)\.svgz?$ /_legacyImg/$1
imgやCSSでSVGを表示できないレガシーなIEとFirefoxに対してだけリダイレクトをかける。/_legacyImg/ の部分には実際には サイトのルートから PNGをまとめたディレクトリまでのパスを入れます。
これだとCSSのcontentなんかで呼び出したときも、レガシーブラウザにはしれっとPNGを渡してくれる。かつSVG以外のPNGやJPEGの画像に対しては普通にメインのデータを渡すから、SVGを採用してる画像だけPNG版を用意すればいい。私は平生HTMLやCSSからSVGを呼び出すときに他の画像と全く同じように扱ってるので（つまりHTMLでも普通にimgタグで呼び出してる）、これならHTMLやCSS側に一切手を加える必要はないし、将来世の中に出回ってるUAが大方対応し終わったら.htaccessからその振り分けの記述だけ外せばいい。そいで代替PNGディレクトリをゴミ箱にダンク。らくちんクリーン。
あ、あと私はMultiviewsをonにして拡張子省略して書くようにしてるので3、そうじゃない設定の場合はその辺良きに計らう必要がある。と言ってもPNG決め打ちとかにしちゃえばいいだろうから、こんな感じかな。
RewriteRule ^(.*)\.svgz?$ /_legacy/$1.pngMultiviews off版ApacheがUAに画像渡す時点で振り分けてるので、BlogだろうがCMSだろうがなんだろうが同じ戦法でいけるはず。ただ一応言っておくとmod_rewriteが使えるサーバじゃないと使えない方法なのでご注意を。
最近はグリフ系はフォントに押し込んで表示させたりするのも流行みたいですが、なんだかそういうHackが行き過ぎた方法はあんまり好きではないので（同じ理由で CSS Sprite もあまり好きじゃない）導入には消極的。「やったらべんりだろうな」と思うこともなくはないけど。
今ではすっかりSVGなので、新しいiPad 入手した方はぜひそれで当方のサイトをご覧なってみては？ 当の私がまだ見てないのですが、きっと滑らか。
いずれにせよ、これで当サイトもSVG解禁...!! 今後使いたい放題だと思うと胸が熱いです。
ラスター画像も今後Retina対応が迫られるのでしょうが、ひとまずベクター画像をベクター画像として扱えることに満足しきってます。やっとですよ。
ちなみに最近SVG導入に興味を持った方、こっそりこんなのあるよ。
- Macユーザしか来ないことがわかってるサイトを一つ管理しててそっちは既に昨年SVGに移行済み。
- たとえば、普段画像は "/_img/" ってディレクトリにまとめてたとしたら、 "/_legacyImg/" みたいのを作ってそっちに "/_img/" と同じディレクトリ構造で代替PNG画像を置く。 で "_img/" 内に .htaccess を書く。すると "/_img/dog/cow.svg" ってのを貰いにきたブラウザがSVGに対応してないヤツだったときに "/_legacyImg/dog/cow.png" を渡す。
- よくできたもんで拡張子なしで呼んでもsvgかそうじゃないかでちゃんと振る舞いは変わる。