SVG画像を利用するメリットとは？

SVGをWeb上で使うメリット

JPEGやGIFといったラスター画像と異なり、ベクター画像のSVGにはさまざまなメリットがあります。ここでは、SVGをWeb上で利用する際のメリットをご紹介しましょう。

画像サイズを変更しても画質が劣化しない

SVGは数式で作られたベクター画像ですから、画質を劣化させることなく、サイズを自由に拡大・縮小できます。JPEG画像のように、表示させるパソコンやスマートゴンなどによって最適な画像サイズを複数用意する必要がありません。

CSSでサイズやカラーを簡単に変更できる

SVGは、数式を用いたデータで作られた画像ですから、CSS（Cascading Style Sheets）とよばれるWebサイトを作成するための言語を利用すること、でサイズやカラーを簡単に変更することができます。

画像の切り抜きができる

SVGは、画像を切り抜くことで不必要な部分を透明にすることができます。

ブラウザ上でテキストの選択やコピーができる

SVGに文字を埋め込んだ場合、CSSのフィルター効果を使って画像のような装飾ができます。また、ブラウザ上でテキストの選択やコピーなども可能です。

ボタンやアニメ―ションを組み込める

SVGにはJavaScript（Webなどで利用されているプログラミング言語）を付加できるので、画像にボタンやアニメーションを組み込むことができます。これにより、優れたユーザーインターフェイスの構築に役立てることも可能です。

SVGを使用する場合の注意点

便利なSVGですが、使用する際にはいくつか注意しなければならないポイントがあります。その注意点についてご説明します。

写真画像はSVGにしない

写真データをSVGにするのは、あまり現実的ではありません。写真をデータにした場合の情報量は膨大なので、数式化することが難しい場合があります。

Adobe IllustratorでSVGファイルを制作する方法

実際に、SVGのメリットを活かしたデータは、どのように制作すれば良いのでしょうか。続いては、Illustratorを使ったSVG効果の適用やSVGイベントの追加方法のほか、SVGファイル書き出しのオプションについてご紹介します。

Illustratorで初期設定のSVG効果を適用する

Illustratorでは、メニューバーの「効果」を使用することで、SVGに影などのグラフィック属性をアートワークに追加できます。また、効果をカスタムして、新しいSVG効果を作成することもできますし、作成したSVG効果を読み込むことも可能です。

なお、SVGの効果を適用する方法については、下記の記事で詳しく説明しています。

SVG について

IllustratorでSVGデータにインタラクティビティを追加する

Webブラウザの表示用アートワークを書き出す場合、IllustratorでJavaScriptコマンドを実行するイベントを定義すれば、Webページ上で動作するインタラクティビティを追加することができます。

インタラクティビティとは、例えばオブジェクト上にカーソルを移動するなど、ユーザーが何らかのアクションを実行したとき対応する動作です。この動作をイベントといいます。

イベントの設定は、SVGインタラクティビティパネルから追加します。SVGインタラクティビティパネルを使用すると、ファイルに割り当てられているすべてのイベントやJavaScriptファイルを表示することもできます。

なお、SVGにインタラクティビティを追加する方法や、設定可能なイベントの種類については、下記の記事で詳しく説明しています。

SVG について