SVGファイルとは？特徴・作成・変換方法を知ろう！

Webデザイナーの方は聞き慣れた「SVGファイル」ですが、JPGやPNGといった画像フォーマットとはどのような違いがあるのでしょうか？SVGとはどのような画像フォーマットなのか、特徴や変換方法を知りましょう！

 

SVGファイルとは？

SVGファイルとは、英語でScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略称であり、2001年9月にW3Cによって勧告された技術です。

当初は、サポートされているブラウザやアプリが少なくなかなか普及もしていませんでしたが、近年ではIllustratorなどのデザインソフトデザイナーをはじめサイト制作では欠かせない技術となりました。

 

PNGやJPEG、GIFなどとどう違うの？

では、PNG画像やJPEG画像、GIF画像などさまざまなフォーマットがありますが、SVG画像とはどのような画像のことを言うのでしょうか？

 

SVGの特徴

SVGの大きな特徴として、Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の名の通り「大きさを変えられる」という点です。

SVGはベクター画像なので、画像を拡大・縮小しても画質が劣化することはありません。そのため、画像に動作やぼかしなどのエフェクトを加えることが可能です。

画像完成後には、カラーやサイズの変更やファイル容量の圧縮などの調整も可能です。

また、小さなロゴやアイコン画像に適しており、単純な画像作成の場合や画像をベクター画像に変換したい場合は、「SVG」の活用をおすすめします。

 

PNGやJPEG、GIFとの違い

PNGは図解やイラストに適しており、ファイルサイズが軽量なJPEGは写真、写真以外の画像はPNGらと一般的に使い分けられます。

GIFは簡単なイラストやロゴに適しており、アニメーションなどの動画作成やアイコンに動きを付けたりするのに便利です。

一方、SVGはPNGやJPEG、GIFと違い、グリッド上の点と線の数式を使用して画像を保存します。SVGなどのベクターファイルは、クオリティーを下げずにパフォーマンスができるためロゴや複雑なデザインに最適です。

以下、PNGとJPEGの違いについて詳しく解説した記事もありますので、興味のある方はぜひご覧ください。

【関連記事：PNGとJPEGの違いとは？あなたの画像に最適な保存形式を！】

 

ラスター画像とベクター画像

画像形式にはラスター画像とベクター画像の２種類の形式があります、SVGファイルや他フォーマットはどのように分類されているのでしょうか？

 

ラスター画像とは？

ラスター画像とは、ピクセルという色情報がついた点の集まりで構成されている画像形式のことを指し、JPGやPNG、GIFなどは全てラスター画像です。

特徴は、写真などの色数の多い画像でも、ラスター画像では点の色を微妙に調整しきめ細やかな色彩を表現できるところです。

しかし、画像拡大をするとピクセルの大きさも大きくなってしまうのでギザギザになったり、ぼやけて見えてしまう問題点もあります。

 

ベクター画像とは？

一方、ベクター画像で描画されるSVGファイルは、「パス」や「シェイプ」の他テキストデータとして格納されているため、拡大や縮小しても画質が劣化しないのが特徴です。

ベクター画像はテキストによって表現しているので色数を使う描写には不向きです。

 

画像なのにテキストで記述されるSVG

画像ファイルであるSVGですが、XMLに準拠しているためテキストエディタで開くことができます。

また、シンプルなものだとテキスト形式なのでテキストエディタで作成したり編集したりもできます。

PNGやJPEG、GIFといった画像ファイルはテキストエディタで開くと文字化けしてしまいます。

 

SVGファイルのメリット・デメリット

ここでは、SVGファイルのメリット・デメリットを紹介していきます！

まずはメリットから説明します。

 

レスポンシブ対応、Retina対応が1つのファイルでできる

今まではスマホやRetina用に2倍サイズで作成した画像や、色違い・hover用などといくつも画像を準備していましたが、svgファイルだと1つのファイルで対応できます。

画像が減るので結果的にはHTTPリクエスト数が削減し、表示高速化につながります。

 

サイズや色の調整が後から簡単にできる

svgファイルはcssでサイズや色を変更できるので、わざわざphotoshopで開いて画像を編集しなくても変更が可能です。

 

アニメーションも対応

今までGIFアニメーションをphotoshopやFlashで作っていましたが、SVGファイルだとCSSやjavascriptで動きをつけることもできます。

 

SVGファイルのデメリット

メリットの多いSVGですが、続いて、SVGのデメリットについて説明していきます。

SVGファイルはロゴやイラストなどのWebグラフィックに最適なのに対して、ピクセルを使用していないため高画質画像には向いていません。

また、複雑な色味を使用する画像はPNGやJPEGなどの画像フォーマットよりもサイズが大きくなるため、画像表示速度が遅くなるというデメリットがあります。

SVGファイルはテキストデータを扱うためプログラミングのスキルを要する場合があるため、SVGファイルの形式を理解して使用するには慣れが必要といえます。

 

SVGファイルはどうやって作るの？

SVGファイルはベクター画像を作成できるIllustratorで作成できます。SVGにしたいベクター形式の画像ファイルを開き、拡張子を「svg」を指定して保存しなおせば作成できるので、とっても簡単ですね。

また、Illustratorでの作成が簡単ですが、「メモ帳」などテキストエディタを使用してSVGファイルを作成することもできます。

 

SVGファイルに変換するには？

SVGファイルを作成したいけど、元データがJPEGやPNGしかない！という場合も、簡単にSVGファイルに変換する方法があります。

 

IllustratorでSVGファイルに変換

Illustratorの画像トレース機能を使用することで、ラスター画像をベクター画像に変換できます。ソフトを使い慣れている方はトレース機能を使った変換が一番手軽ではないでしょうか。

 

オンラインツール「Image Vectorizer」

オンラインツール「Online Image Vectorizer」を使うと、手軽に画像変換ができます。もちろん無料で使うことが可能です。

フォーマットやサイズに制限はありますが、変換したい画像をアップロードするだけでSVGファイルへ変換されたものがダウンロードできます。

【関連記事：「Online Image Vectorizer」】

 

SVGファイルの使い方

SVGファイルを作成したらWEB上に表示させてみましょう。表示方法は通常のJPEGやPNGなどの画像ファイルと同じように<img>タグを使用して表示できます。

SVGファイルをアニメーションさせたい時などは、直接HTMLコードに埋め込んで表示もできますが、コードが複雑になってしまうので、アニメーションが不要であれば無難に<img>タグを使用するのがいいでしょう。

 

SVGを活用しよう

SVGファイルは拡大や縮小しても画像が荒れることがなく、後からサイズや色の編集もしやすいため、Webサイトのロゴやアイコンなどで画像を表示する場合、他の画像形式と比べて非常に便利なフォーマットです。ぜひ活用してみてください！

以下の記事では、Illustrator（イラストレーター）を使ったSVGファイルの作成方法、SVGを使用するにあたっての注意点について紹介しています。興味のある方はこちらも併せてチェックしてみましょう！

【関連記事：イラストレーターを使ってSVGを作成しよう！】