この記事の要点：最近は新しい「mac book」がRetinaディスプレイであることもあり、PC、スマホというデバイスの違い以外にも、Retina、非Retinaという解像度の違うディスプレイで綺麗に表現する方法が必要になりかもしれません。ということでSVGの作成方法を簡単に説明します。
この記事は2015年に公開したものです。製品・サービスの仕様や制度は、現在と異なる場合があります。
※ 現在はInternet Explorerのサポートが終了し、主要なブラウザはいずれもSVGに対応しています。以下は2015年当時の記事です。
いろいろな表現ができるウェブページですが
Retinaなど、解像度が異なるデバイスで表示した際に
カクカクの画像になるのが、かなりデザインという観点から許せない。
そんな時に、使えるのが「SVG」。
結構前からある技術ではありますが、なかなか浸透はしないようです。
それもそのはず。
今までIE8などのブラウザでは、表示できないこともあり
一般化してなかったのです。
ただ、HTML5の普及とともに多くのブラウザーでサポートされるようになり
去年あたりから徐々に見かける機会が増えてきました。今回はそんなSVGの表示方法や
非対応ブラウザの処理をまとめていきます。
1. SVGって何なの？
SVG（Scalable Vector Graphics）は、Illustratorなどで作成したようなベクター画像を表示する技術です。
JPEGなどの画像は、拡大したり縮小したりすると、どうしても丸い部分などがギザギザになりますよね。そう、Web上で一般的に使われるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小してもギザギザするような画質劣化が起こりません。
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タグで読み込むことができます。
4. データの劣化がないから案外使える
SVGファイルは、イラストレータがあれば簡単に作成が可能です。
画像が劣化しない点から見ても、簡単なロゴデータなどに使うことができます。
SVGの機能がサポートされていないブラウザ向けには、PNG画像を代替で表示するなどのフォールバックを用意する必要があります。対応しないという選択肢もありますが、IE8やAndroid 2.3.xユーザのシェアを考えると、まったく対応しないというわけにもいかないかと思います。現状、Modernizrを使ってSVGのサポート状況を判別して対処をするのが良いようです。