SVGの画像を表示してみよう

いろいろな表現ができるウェブページですが
Retinaなど、解像度が異なるデバイスで表示した際に
カクカクの画像になるのが、かなりデザインという観点から許せない。

そんな時に、使えるのが「SVG」。
結構前からある技術ではありますが、なかなか浸透はしないようです。

それもそのはず。
今までIE8などのブラウザでは、表示できないこともあり
一般化してなかったのです。

ただ、HTML5の普及とともに多くのブラウザーでサポートされるようになり
去年あたりから徐々に見かける機会が増えてきました。今回はそんなSVGの表示方法や
非対応ブラウザの処理をまとめていきます。

1. SVGって何なの？

]SVG（Scalable Vector Graphics）は、Illustratorなどで作成したようなベクター画像を表示する技術です。
JPEGなどの画像は、拡大したり縮小したりすると、どうしても丸い部分などがギザギザになりますよね。そう、Web上で一般的に使われるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小してもギザギザするような画質劣化が起こりません。

2. 実際にSVGを作り込む

まず、SVGファイルを作成してみましょう。
SVGファイルは「Illustrator」などのベクター作成ソフトを使って作成します。

保存方法として「SVG」を指定するだけで
svgファイルとして保存ができます。

3. HTMLで読み込んでみましょう

さて、SVGファイルができたら、次は読み込みをしてみましょう。

SVGファイルが画像ファイルの一種ですので
画像を読み込む要領と同じimgタグで読み込むことができます。

4. データの劣化がないから案外使える

SVGファイルは、イラストレータがあれば簡単に作成が可能です。
画像が劣化しない点から見ても、簡単なロゴデータなどに使うことができます。

SVGの機能がサポートされていないブラウザ向けには、PNG画像を代替で表示するなどのフォールバックを用意する必要があります。対応しないという選択肢もありますが、IE8やAndroid 2.3.xユーザのシェアを考えると、まったく対応しないというわけにもいかないかと思います。現状、Modernizrを使ってSVGのサポート状況を判別して対処をするのが良いようです。