画像フォーマットの一種であるSVGが、広く活用されるようになってきました。Webサイトで利用されるケースも年を追うごとに増えており、デザイン関係の仕事をするうえでもSVGの知識は欠かせないものになりつつあります。そこで、SVGとはどのような画像フォーマットなのか、その特徴やファイルの作り方、使用する際の注意点などについて紹介していきます。

そもそも「SVG」とは？

まずは、SVGという画像フォーマットの概要と特徴について説明します。

SVGの概要

SVGとは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略で「大きさを変えられるベクター画像」という意味です。PNGやJPEGなどがピクセルの集まりとして表現されるラスター画像（ビットマップ画像）であるのに対して、ベクター画像は曲線を描いたり一定の範囲を塗りつぶしたりといった処理を座標と数式によって行えることが特徴です。ベクター画像は、Adobe IllustratorやCorelDRAWなどの画像編集ソフトで扱うことができます。

SVGの画像フォーマットは、HTMLやCSSをはじめとするWeb関連技術の規格策定などを行なっているW3Cによって1998年に作れられました。当時はブラウザ開発元の各社が競合技術を持っている状態だったため、なかなか普及には至りませんでしたが、その後ほとんどのブラウザがSVGに対応しています。ほかの画像フォーマットと同様に利用できるようになったため、多くのWebサイトで活用されるようになってきています。

SVGの特徴

SVGの最大の特徴は、その名前が示す通り「大きさを変えられる」という点でしょう。ベクター画像はブラウザがその場で描画を行うため、どんなサイズでも美しく表示することができるのです。この特徴は、iPhoneなどに採用されているRetina Displayのような高精細ディスプレイで特に力を発揮します。ラスター画像の場合、高精細ディスプレイの性能をフルに活かすには解像度の異なる複数のバージョンを用意する必要がありますが、SVGなら1ファイルのみで対応できるためです。これにより、HTTPリクエスト数を削減でき、多くの場合はファイルサイズも小さくなるため、Webページのレスポンス向上が期待できます。

SVGは画像ファイルでありながら、ピクセル値ではなく座標や色などのデータが収められているという点も大きな特徴です。この性質により、SVGは表示サイズや一部の色などについてCSSを用いて変更することが可能です。

その他の画像形式との違い

PNGやJPEG、GIFなどのラスター画像はビットマップ形式のため、拡大するとギザギザに見えてしまうという性質があります。また、繰り返し編集を行うと画質が劣化してしまうという問題があるほか、ファイルサイズが大きくなりやすく取り扱いが不便な面もあります。

これに対し、ベクトル形式のSVGファイルは拡大・縮小を伴う編集を行っても画像の劣化がありません。描画の形状を表す「パス」や「シェイプ」のほか、テキストデータなどを画像データとして格納しているためです。デバイスの解像度や画面サイズによって画質が変わってしまうということもないため、レスポンシブデザインとも相性がよいという特徴があります。なお、印刷物などにもよく利用されるPDFも、SVGと同様にベクター形式を基本としたフォーマットです。

SVGで可能なWeb表現について

SVGには、拡大しても美しいということ以外にも、Webデザインの可能性を広げてくれるような数多くの特徴があります。ここでは、SVGを活用することで可能となるWeb表現をいくつか紹介します。

魅力的なテキスト表現

Webデザインではタイトルや見出し、ボタンなどのような文字情報を必要とする部分を画像で表現することがよくあります。その場合、Adobe Photoshopなどを用いてPNGのようなラスター画像を作成する方法が一般的でしょう。SVGでも、テキストデータを埋め込むことで文字の装飾が行えます。一見するとPNGなどと変わらない画像のような見た目ですが、表示されるのはあくまでテキストデータです。そのため、ブラウザ上での選択やコピーといった操作も可能になります。

また、SVGファイルそのものもXMLと呼ばれる形式のテキストファイルになっているため、テキストエディタによる編集が可能です。CMSなどを用いてWebページを生成する際にも、文字の装飾を動的に行えます。

曲線を活かしたUI表現

SVGでは、縦・横の罫線だけでなく斜めの線や自由な曲線も表現することが可能です。これをUIに用いれば、任意の形状のボタンなども作成することができます。また、1つのSVGに複数のボタンを収めることも可能です。これらの特徴は、たとえば複雑な境界線をもつ地図などの表現にも応用することができます。境界線で囲まれたエリアごとにホバー効果（マウスオーバーに反応する効果）をつけたり、リンク先を指定したりすれば、それぞれのエリアをボタンのように働かせることが可能です。これに近いことは、PNGなどのラスター画像でもクリッカブルマップを駆使すれば実現できますが、SVGを用いたほうが作りやすいでしょう。

アニメーション表現

SVGには、ちょっとしたアニメーションも組み込むことが可能です。これをWebサイトのマイクロインタラクションに応用すれば、印象的で理解しやすいUIやUXを構築できるでしょう。SVGでアニメーションを行うにはいくつかの方法があります。JavaScriptで動かす方法や、アニメーション制作ソフトからSVGを書き出す方法などです。Webデザイナーなら、CSS Animations（CSSのアニメーション機能）を使うのが導入しやすいかもしれません。ただし、CSS AnimationsはIE（Internet Explorer）では意図通りに動作しない場合があるため注意が必要です。

フィルター効果を活かした表現

SVGには、CSSと同様のフィルター効果をかける機能もあります。カラー調整やモノクロ化、ぼかしやドロップシャドウなどといった効果を与えることが可能です。実は、SVGのフィルター機能はCSSのフィルター機能よりも古くからあり、ほかの画像などにも利用できるようにするためにW3CがCSS 3に取り込んで規格を整えたという歴史があります。そのため、CSSのフィルターよりもSVGのフィルターのほうが対応ブラウザは多いのです。

また、SVGのフィルターは柔軟性の面でも優れています。たとえば、透過処理されたPNG画像にCSSでドロップシャドウをかけても、そのままでは画像全体の矩形領域に対して影がついてしまいます。しかし、SVGのフィルターなら、任意の形状にドロップシャドウを適用することが可能です。

画像を切り抜く形での表現

SVGの「画像を切り抜く表現」もWebデザインの可能性を広げてくれる機能でしょう。画像を切り抜く表現方法には2種類あります。1つ目は「クリッピング」と呼ばれる方法で、任意の形状に沿って画像を切り抜くというものです。クリッピングを用いると、画像の完全に透明な部分と完全に不透明な部分を指定することができます。同様のことはCSSでも可能ですが、対応ブラウザが少ないため、SVGを用いたほうが思い通りの表現が可能です。

2つ目は「マスキング」と呼ばれる方法で、グラデーションにより半透明な部分を残しながら画像を切り抜きます。クリッピングでは境界線がくっきりと出るのに対し、マスキングでは境界線にぼかしやグラデーション効果を与えることも可能です。

SVGの具体的な作り方と取り扱い方法

ここからは、SVGファイルを作るための具体的な方法と、Webページへの埋め込み方について説明します。

画像編集ソフトを使った作成方法

SVGを作成するには、Adobe IllustratorやAdobe Photoshopなどの画像編集ソフトを使うのが最も一般的な方法です。Webページで使うアイコン画像なども、この方法で作成できます。SVGはどんなサイズでも表示できるので、作るときにはいつも同じサイズにすると作業しやすいでしょう。このとき、縦・横のピクセル数を揃えて正方形にするのがおすすめです。また、正方形の領域を目一杯使い、余白がないようにデザインしましょう。余白の大きさを揃えることで、複数の画像を同じサイズで並べたときにも不自然な印象にならずにすみます。

SVGを作成するときは、すべてのオブジェクトを「パス」や「シェイプ」にする必要があります。テキストはそのまま埋め込むこともできますが、表示する際の環境によらず同じ見た目にするためには、書き出し前にアウトライン化が必要です。画像の色をあとからCSSで変更する予定がある場合は、全体を一色だけでデザインしておくと便利でしょう。

オンラインエディタを使った作成方法

オンラインエディタでSVGを作成するという方法もあります。画像編集ソフトを持っていない場合や、手軽にSVGを試したいときなどに利用するとよいでしょう。「Vecteezy」は、編集可能な多数の画像素材とともに提供されているSVG作成サービスです。Illustratorのようにベクター画像を編集できるオンラインエディタなので、ブラウザだけでSVGを作れます。

「ZorroSVG」は、透過処理されたPNGまたはGIFをアップロードすると、ファイルサイズの小さいSVGに変換してくれるWebサービスです。ただし、作成されるのはベクター画像ではなく、JPEGを埋め込んでマスキングしたSVGとなります。ラスター画像を内部に埋め込むこともできるというSVGの特徴を活かして、擬似的に透過JPEGを実現しているためです。

SVGファイルの変換方法

画像編集ソフトを用いれば、PNGやJPEGからSVGを作成することも可能です。Adobe Illustratorの場合は、画像トレース機能によってラスター画像から輪郭などを抽出し、ベクター画像に変換するとよいでしょう。

ベクター画像への変換は「Image Vectorizer」というWebサービスでも可能です。ラスター画像をアップロードすると自動的に輪郭を認識し、SVGとしてダウンロードできるようになります。アップロードできるのは1MBまでのPNGかJPEG、BMPのみですが、無料で利用できるため手持ちの画像を手軽にSVGに変換したいときなどに便利です。

SVGファイルの表示方法

SVGファイルをWebページで表示する方法には、いくつかのバリエーションがいくつかあります。最もシンプルなのは、HTMLの「img」タグを使った方法でしょう。CSSの「background-image」プロパティによって、特定部分の背景画像としてSVGを読み込ませるという方法もあります。どちらの場合も、PNGやJPEGなどを表示する場合と全く同じように、SVGを埋め込むことが可能です。

HTMLには「svg」というタグもあります。このタグを使用すれば、HTMLファイル内に直接（インラインで）SVGを埋め込むことも可能です。SVGそのものがテキストファイルであるからこそできる方法です。単純にSVGを表示するだけなら「img」タグかCSSによる方法が簡単でおすすめですが、動的な処理が必要な場合や、ページのロード時間を短縮したいときなどには「svg」タグが便利なこともあります。なお、あまり用いられることはないかもしれませんが、より汎用的な埋め込みに使われる「object」タグでSVGを表示させることも可能です。

SVGを使用する際の注意点

ここまででSVGの便利な特徴や作成方法などについて見てきましたが、より効果的にSVGを利用するためには注意すべき点もあります。

SVGが不向きなケースがある

SVGはベクター画像のため拡大・縮小しても画質を損なうことがなく、Retina Displayなどの高精細ディスプレイでも美しく表示されます。しかし、どんな状況でも最高の描画ができる万能フォーマットというわけではありません。多数の色調が複雑に表現された画像については、ラスター画像のほうが向いています。なかでも、典型的な例は「写真」です。もし、写真を高画質なままベクター画像にしようすると、データ量が膨大になってしまうでしょう。そのため、写真をWebページに表示する際には、JPEGなどを使用するのが一般的な方法です。

SVGが力を発揮するのは、ロゴやアイコンのようなシンプルな形状のオブジェクトや「線」と「塗り」で表現されたイラストレーションなどです。画像フォーマットは、用途に応じてどれが向いているのかを見極めて使い分けるようにしましょう。

事前にブラウザの対応状況を確認する必要がある

SVGを使用する際には、ブラウザの対応状況にも注意する必要があります。たとえば、IEのバージョン8以下や、Androidのバージョン2.3以下ではSVGのサポートがありません。iOS版のSafari 4.1以下などのように部分的なサポートにとどまっているバージョンでは、不完全な表示になってしまう場合もあります。古いバージョンも対象にしたWebサイトを制作する場合には、SVGを使いたい部分でもPNGやJPEGで代用することを検討するとよいでしょう。とはいえ、モダンブラウザの比較的新しいバージョンのみをターゲットとする限りは、ほとんど問題ありません。

SVGファイルのダウンロードサイトの活用も検討しよう

SVGを試してみたいけれど、ゼロから作っている暇がないという場合は、ダウンロードサービスを活用するのもよいかもしれません。SVGはテキストファイルなので、ダウンロードしたものは画像編集ソフトでもテキストエディタでも編集可能です。また、アイコン画像は特にSVGが使われることが多い部分なので、どのようなデザインのものがダウンロードできるのか確認して参考にするのもよいでしょう。アイコンのダウンロードには「Iconfinder（アイコンファインダー）」や「iconmonstr（アイコンモンスター）」などのサービスがおすすめです。