Retinaディスプレイ対策でSVGを使ってみる

Retinaディスプレイで画像がぼやける件について…

Retinaディスプレイの罠

以前iphoneでホームページを見たら画像が荒い！？という記事でimgタグの画像を入れ代えるという方法を書きました。

イラスト素材ページの見出しにCSSでVEGLキャラクターのアイコンを使っていた所、

先輩に「アイコンの画像が荒いですね～」と言われ「Retina…またお前か…」と思ったので今回は手っ取り早い解決策を…

画像をSVGにする

またまた画像2つ作ってCSSで入れ替えても良いのですが正直めんどくさい…

という事で荒くならない画像にする事にしました。

SVGファイルとは…

Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。

アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。

Wikipedia

デザイナー御用達のAdobe illustlator等で代表されるベクターデータで保存された画像です。

ベクターデータは拡大しても画像が荒くならないという特徴があるので、今回のようなillustratorで作成したアイコンをWebで表示させるにはもってこいってな訳です。

かなり昔からあるファイル形式ですが、サポートしているブラウザが少なかったため最近まで日の目を見ていなかったとの事。

ちなみに作成したアイコンはこれ↓

SVGにする事でデメリットはないの？

最近はサポートしているブラウザが増えてきたとはいえ、まだ古いブラウザを使っている人もいるかと思います。

IE9以降とモダンブラウザはサポートしていたと思うのでそろそろ大丈夫じゃないかと…多分…きっとそう…