スマホやタブレットに強い!ベクター情報で画像コンテンツを表現する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 上でサイズや色を容易に変更できます。

HTML5だけではない!Flashからのデータ移行先としても使えるSVG

先月のコラムで、Flashのサポート終了に伴う対策として、HTML5へのデータ移行が有効である、ということを書きましたが、SVGはCSSやJavaScript を使って動きをつけることも可能であるため、Flashでの簡易なアニメーションファイルの代替やデータ移行フォーマットとしての役割を果たすことも可能です。JavaScriptライブラリやWeb APIと組み合わせて活用すれば、Flashのような強力なリッチコンテンツを生成・提供する事ができます。例えば文字が点滅したり、色が変わったりというようなFlashのバナー広告や、特定のボタンクリックにより、ボタンが爆発したり、大きくなってしぼんだりというようなインタラクティブなアニメーションを含むFlashコンテンツでも「SMIL」というXMLベースの言語を用いると、CSSやJavaScriptを使わず、HTML5内にコードを書くだけでSVGのアニメーションを実現することができます。

マルチデバイス対応の必要性が求められている昨今、その実力をいかんなく発揮する環境がだんだん整いつつあるSVGを活用し、ITアウトソーシング業界に新しい風を吹かせたいと思います。

ライター:Sato

御相談、ご質問はこちら

お気軽にご相談ください

製品カタログ・セミナーでの講演資料など、豊富な資料がダウンロードできます

最新事例の公開情報や、イベント・セミナー情報をお届け

pagetop ボタン
©2018 CyberTech corporation ltd. All Rights Reserved.