スマホやタブレットに強い！ベクター情報で画像コンテンツを表現するSVGの可能性

SVGファイルとは？

画像フォーマットと聞いて、皆さんは何を想像されるでしょうか？有名なものは、JPEG、GIF、BMPといった画像形式であり、インターネットが普及した当時から使用されているものです。現在でもPCはもとより、スマホなどの写メの保存形式や、ブログ、インスタグラム、Facebookなどへの投稿時など、なんらかのシーンで聞いたことはあるかと思います。

しかし、SVG（スケーラブル・ベクター・グラフィックス：Scalable Vector Graphics）という名前や画像フォーマットは余り聞いたことが無いかもしれません。知らない人にとっては「新しい技術」と思うかもしれませんが、Webの標準化団体「W3C」からSVG 1.0が勧告されたのは2001年9月と存在自体はかなり前からあった画像形式であり、最近誕生したものではありません。では、なぜ今になってこのSVGという画像形式が今注目されているのでしょうか？

SVGとJPEG、GIF、PNGなどの画像フォーマットとの違い

コンピュータで画像を扱う方法にはいくつかありますが、大きく分けると「ラスター画像（ビットマップ画像）」と「ベクター画像」の2つに分けられます。写真のように画像を規則正しく並べた色付きの微細な点(ドット)の集合として表す「GIF」、「JPEG」、「PNG」等といったラスター形式に対し、「SVG」といったベクター形式では画像を線や面などの図形を表す数値の集合として表現するという違いがあります。

ラスター形式（ビットマップ形式）の画像はドットで表現された画像であり、画像を拡大すると、輪郭がギザギザになります。しかし、複雑に色や図形が組み合わさったデータ（写真など）表現には、この形式が向いています。一方、ベクター形式では点の座標位置や点同士を結ぶ線を演算して表した画像であり、ドットではなく計算して表示する画像のため、画像自体のデータは小さく、画像の拡大や縮小も画質を演算して表現すため、劣化せずに表示することができます。

また、SVGはマークアップ言語であるXML（Extensible Markup Language）の標準に基づいて策定された言語の一つであり、HTML等と同じようにタグを用いて図形を記述する事ができます。SVGは画像形式にもかかわらず、XMLで記述されているテキストデータであるため、テキストエディタを使用して画像の作成・編集が可能です。さらに、中身がテキストファイルで書かれているのため、ほかのデータを取り込むことも容易に実施でき、動的なコンテンツの生成も可能となっています。

リッチコンテンツの表現に強い！SVGの特徴とは？

SVG（Scalable Vector Graphics）の「Scalable（スケーラブル）」は「形を保ったまま拡大・縮小ができる」といった意味です。画像のサイズにかかわりなく拡大・縮小しても、画像のクオリティが落ちることが無く、ビューアがサポートしていれば画像内に埋め込まれたフォントの検索も可能です。また、レイヤ機能もサポートしており、データの再加工が簡単にできるようになっており、HTMLやXHTMLと組み合わせて利用すれば、Flashのような双方向的なコンテンツの作成も可能です。また、スマホやタブレットデバイスで多用されるピンチによって拡大・縮小しても画像のクオリティが落ちないため、スマホ向けのWebサイトとの相性はバッチリです。

また、Webサイトの構築において、PC用の画像、同じデザインのサイズが異なるスマホ表示用画像、および、マウスオン時の画像等を複数用意する必要がありましたが、SVGファイルであれば1つのファイルで対応できるため、結果的に画像サイズも軽減されます。したがってHTTPリクエスト数の削減につながるため、ページの表示スピードが上がるため、閲覧ユーザにとって優しいだけではなく、応答速度の向上に伴いSEO効果も期待できます。また前述のようにタグレベルによる内容の変更ができるため、あとから色やサイズの変更が必要になった場合、専用の画像ソフトを使用せずにCSS 上でサイズや色を容易に変更できます。