Retina 対応に SVG を使う
- Date:
- 2012.07.03
iPad に続き、MacBook Pro でも Retina ディスプレイが採用され、Web サイトでも高解像度ディスプレイへの対応が課題となってきました。
Fluid Image と呼ばれる画像を拡大・縮小する手法、「Adaptive Images」や JavaScript ライブラリを使って対応する方法などありますが、このサイトでは、ロゴやアイコン等の共通パーツに SVG を使って対応しています。
SVG での見え方
PNG 形式（72ppi）で書き出した画像と、SVG 形式で書き出した場合の Retina ディスプレイでの見え方の違いは次のとおりです（iOSシミュレータでの表示）。PNG 形式では、ロゴタイプやアイコンがぼやけているのが分かると思います。なお、「About」などのナビ部分はテキストなので、どちらでも鮮明に見えています。
手順
Illustrator で画像を作成し、SVG 形式で書き出し、CSS で指定するだけです。ただし、Internet Explorer 8 は、SVG に非対応なので、PNG 画像も同時に書き出します。
SVG サポートの判別に JavaScript ライブラリ「Modernizr」を読み込んだ後、下記のように CSS を記述しています。
#sidebar .sns > li a {
background-image: url("./common/img/icons.png"); /* SVG 非対応 */
background-repeat: no-repeat;
background-position: 0 0;
}
.svg #sidebar .sns > li a {
background-image: url("./common/img/icons.svg"); /* SVG 対応 */
}
SVG 非対応ブラウザまでサポートに含める場合、以下の課題は残りますが、サイトロゴや主要なパーツには使えるのではないでしょうか。
SVG 形式の課題
- ベクターデータに限られるので写真等のビットマップ形式は適用外
- img 要素として使う場合は、JavaScript 等を使って画像形式を振り分ける必要がある
- 画像を 2種類の形式で書き出す必要がある