17日Web制作やっと少しずつ現実的になってきた、webで使える夢のベクター画像SVG。拡大し放題だししかもテキストデータでXMLだわ容量小さいわってことで何ともかわいいヤツ。当方ものすごくSVG好きです。caniuse.comによれば、SVG画像を普通の画像と同じ様に扱えるのはどうやらIE9以降。いくらなんでも現時点で8を切るわけにもいかず、SVG導入は将にIE待ち状態。しかたなくSVGクオリティーはローカルで個人的に楽しむにとどまり、webに上げる用は別途PNG-24に書き出してました1。それでもヘッダの蛙ちゃんとかサイトロゴとかポイントになってて且つ管理しやすい部分はPHPとかCSSの方で振り分けてモダンブラウザにはSVGを渡すようにしていたのですが、いかんせん個別対応なので全部に対してやるのはしんどいしソースも汚くなるから最低限しかやってなかった。iPadもRetinaになり今後本格的にHiDPI時代がやってくるかと思うと、そろそろさらりと一足先に対応しておきたいところです。振り分けることにした。やらせようつまり、今まで普通に画像を入れていたディレクトリの画像を本格的にSVGに入れ替えてしまい、SVGに対応しているモダンなブラウザは普通のそっちの画像を取りにいかせる。振り分けてリダイレクトをかける2。こんな感じのことを書く。/_legacyImg/$1.htaccessに書き足すimgやCSSでSVGを表示できないレガシーなIEとFirefoxに対してだけリダイレクトをかける。PNGをまとめたディレクトリまでのパスを入れます。これだとCSSのcontentなんかで呼び出したときも、レガシーブラウザにはしれっとPNGを渡してくれる。SVG以外のPNGやJPEGの画像に対しては普通にメインのデータを渡すから、SVGを採用してる画像だけPNG版を用意すればいい。私は平生HTMLやCSSからSVGを呼び出すときに他の画像と全く同じように扱ってるので(つまりHTMLでも普通にimgタグで呼び出してる)、これならHTMLやCSS側に一切手を加える必要はないし、将来世の中に出回ってるUAが大方対応し終わったら.htaccessからその振り分けの記述だけ外せばいい。そいで代替PNGディレクトリをゴミ箱にダンク。あ、あと私はMultiviewsをonにして拡張子省略して書くようにしてるので3、そうじゃない設定の場合はその辺良きに計らう必要がある。言ってもPNG決め打ちとかにしちゃえばいいだろうから、こんな感じかな。off版ApacheがUAに画像渡す時点で振り分けてるので、BlogだろうがCMSだろうがなんだろうが同じ戦法でいけるはず。一応言っておくとmod_rewriteが使えるサーバじゃないと使えない方法なのでご注意を。好きじゃない)導入には消極的。「やったらべんりだろうな」と思うこともなくはないけど。当の私がまだ見てないのですが、きっと滑らか。今後使いたい放題だと思うと胸が熱いです。ラスター画像も今後Retina対応が迫られるのでしょうが、ひとまずベクター画像をベクター画像として扱えることに満足しきってます。ちなみに最近SVG導入に興味を持った方、こっそりこんなのあるよ。Macユーザしか来ないことがわかってるサイトを一つ管理しててそっちは既に昨年SVGに移行済み。同じディレクトリ構造で代替PNG画像を置く。