SVG画像を利用するメリットとは？
SVGは画像を拡大しても画質が劣化せず、さまざまな効果を追加できます。SVGの特徴やメリットのほか、Adobe IllustratorでSVGを制作する方法を説明します。
SVG画像を利用するメリットとは？
Web上で使われる「SVG」という画像形式は、サイズを大きくしても画像が劣化しないなど、一般的な「JPEG」などの画像形式に比べメリットの多い画像形式です。
ここでは、SVGの特徴や、Web上でSVGを使うメリットと注意点をご紹介します。また、Adobe IllustratorでSVGを制作する方法と、追加できる効果についても見ていきましょう。
SVGとは？
SVGとは日本語で「大きさを変更できるベクター画像」を意味する「Scalable Vector Graphics」の頭文字を取ったものです。
ではベクター画像とはどのような画像なのでしょうか。例えば、ベクター画像の「正円」は、描画する場所の座標を数式にしたデータです。したがって、座標の数値を変えたり数式に入る数値を変えたりすれば、移動も拡大縮小も簡単にできるのです。
ベクター画像に対して、「JPEG」「GIF」「PNG」のようなラスター画像という形式もあります。ラスター画像の「正円」は縦横に並んだピクセルと呼ばれる点の集合体になります。したがって、画像を大きくしても、元のピクセルが大きくなるだけですので、画質が荒くなります。
ですから、画像のサイズが大きくなったり、色数が多くなったりすればピクセルデータが増えるため、ファイルサイズも大きくなるのです。また、一度作成した画像を後から大きくしようとした場合、ピクセルを大きくすることになるため、画像の縁がギザギザになってしまいます。
SVGをWeb上で使うメリット
JPEGやGIFといったラスター画像と異なり、ベクター画像のSVGにはさまざまなメリットがあります。ここでは、SVGをWeb上で利用する際のメリットをご紹介しましょう。
画像サイズを変更しても画質が劣化しない
SVGは数式で作られたベクター画像ですから、画質を劣化させることなく、サイズを自由に拡大・縮小できます。JPEG画像のように、表示させるパソコンやスマートゴンなどによって最適な画像サイズを複数用意する必要がありません。
CSSでサイズやカラーを簡単に変更できる
SVGは、数式を用いたデータで作られた画像ですから、CSS（Cascading Style Sheets）とよばれるWebサイトを作成するための言語を利用すること、でサイズやカラーを簡単に変更することができます。
画像の切り抜きができる
SVGは、画像を切り抜くことで不必要な部分を透明にすることができます。
ブラウザ上でテキストの選択やコピーができる
SVGに文字を埋め込んだ場合、CSSのフィルター効果を使って画像のような装飾ができます。また、ブラウザ上でテキストの選択やコピーなども可能です。
ボタンやアニメ―ションを組み込める
SVGにはJavaScript（Webなどで利用されているプログラミング言語）を付加できるので、画像にボタンやアニメーションを組み込むことができます。これにより、優れたユーザーインターフェイスの構築に役立てることも可能です。
画像に効果をつけられる
SVGは、CSSを利用することで、ドロップシャドウなどの効果を付加できます。また、カラー調整やモノクロ化など、さまざまな効果をかけられるので、多彩な画像表現が可能です。
SVGを使用する場合の注意点
便利なSVGですが、使用する際にはいくつか注意しなければならないポイントがあります。その注意点についてご説明します。
写真画像はSVGにしない
写真データをSVGにするのは、あまり現実的ではありません。写真をデータにした場合の情報量は膨大なので、数式化することが難しい場合があります。
SVGに対応していないブラウザがある
SVGを使用するには、ブラウザがSVGに対応しているかどうかにも注意が必要です。パソコン用、スマートフォン用、どちらも古いブラウザでは対応していません。
SVGに対応していないブラウザは下記のとおりです。
＜SVG非対応ブラウザ＞
・Internet Explorer 8以下
・Android標準ブラウザ 2.3以下
・iOS Safari 3.1.1以下 など
Adobe IllustratorでSVGファイルを制作する方法
実際に、SVGのメリットを活かしたデータは、どのように制作すれば良いのでしょうか。続いては、Illustratorを使ったSVG効果の適用やSVGイベントの追加方法のほか、SVGファイル書き出しのオプションについてご紹介します。
Illustratorで初期設定のSVG効果を適用する
Illustratorでは、メニューバーの「効果」を使用することで、SVGに影などのグラフィック属性をアートワークに追加できます。また、効果をカスタムして、新しいSVG効果を作成することもできますし、作成したSVG効果を読み込むことも可能です。
なお、SVGの効果を適用する方法については、下記の記事で詳しく説明しています。
IllustratorでSVGデータにインタラクティビティを追加する
Webブラウザの表示用アートワークを書き出す場合、IllustratorでJavaScriptコマンドを実行するイベントを定義すれば、Webページ上で動作するインタラクティビティを追加することができます。
インタラクティビティとは、例えばオブジェクト上にカーソルを移動するなど、ユーザーが何らかのアクションを実行したとき対応する動作です。この動作をイベントといいます。
イベントの設定は、SVGインタラクティビティパネルから追加します。SVGインタラクティビティパネルを使用すると、ファイルに割り当てられているすべてのイベントやJavaScriptファイルを表示することもできます。
なお、SVGにインタラクティビティを追加する方法や、設定可能なイベントの種類については、下記の記事で詳しく説明しています。
IllustratorでWeb用に最適化したSVGを書き出す
Illustratorでは、SVGのファイル書き出し時に、「スタイル」や「フォント」など、Web用に最適化されたSVGファイルを生成できるオプションを利用できます。
なお、Web用に最適化したSVGを書き出す方法や設定可能なオプションの種類については、下記の記事で詳しく説明しています。
SVGのメリットを知り、美しいユーザーインターフェイスを構築しよう
SVGは、JPGやPNGなどのラスター画像とは異なり、画像のサイズを拡大しても画質を変えずに表示できるファイルです。特にウェブ上では、ブラウザやパソコンやスマートフォンなどの端末によって、最適なサイズの画像を何枚も準備する必要がなく、非常に便利です。
SVGには、さまざまな効果を追加できますから、SVGを活用してユーザーフレンドリーなユーザーインターフェイスを構築しましょう。