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

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

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

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

1. SVGって何なの?

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

現在SVGが対応しているブラウザは?現在SVGが表示されるブラウザは以下の通りです。
Windowsなどは、古いOSやブラウザのサポートを終了していっているので、できれば皆様アップデートしていって欲しいですね。Internet Explorer 9以上
Firefox 3.0以上
Chrome 4.0以上
Mac OS X Safari 3.2以上
Opera 9.0以上
iOS Safari 3.2以上
Androidブラウザ 3.0以上

2. 実際にSVGを作り込む

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

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

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

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

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

<img src=”sample.svg” alt=”サンプルSVGファイル” />

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

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

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

永井 洸太朗

永井 洸太朗

アートディレクター / クリエイティブディレクター マーケティングからデザインまで、幅広い知識と技術で、クライアントへ最高のパフォーマンスを提供するディレクター

%d bloggers like this: