SVGって何？メリットとデメリットを理解して、制作にいかそう！

2024年6月27日

SVGとは、「Scalable Vector Graphics」の略称で、ベクトル形式の画像ファイルです。ファイル名は「〇〇〇〇.svg」で表示されます。

この記事では、SVGファイルとは何なのか、詳しく解説していきます。

 

 

 

 

そもそも、ベクトル形式って何？

まず、こちらの画像をご覧ください。
AとBの違いがわかりますでしょうか。
どうでしょうか。
どちらも同じ図形ですが、Bの方は拡大すると「ギザギザ」になっているのがわかりますね。

これは、画像の形式の違いによっておこる現象なのです。

 

 

 

ベクトル形式（ベクターファイル）

Aはベクトル形式のファイルです。主に .svg、.eps、.ai などといった画像形式のファイルを指します。
このベクトル形式のファイルのことを、ベクターファイルと呼びます。

 

 

 

ビットマップ形式（ラスターファイル）

Bはビットマップ形式のファイルです。主に .jpg、.png、.psd などといった画像形式のファイルを指します。
このビットマップ形式のファイルのことを、ラスターファイルと呼びます。

まず、画像にはこの2種類があることを押さえておきましょう。

 

 

 

 

どうして2種類のファイルがあるの？

ベクターファイルのメリット・デメリット

ベクターファイルは、図を数値によって表現するため、解像度に左右されません。

つまり、どんなに拡大・縮小しようが、きれいな形を保ちます。

例えば、Web、ロゴ、デジタルイラストなど、様々なメディアに使用されます。
一方で、色の表現には限りがあるため、複雑な色や形の表現には適しません。
  • 拡大・縮小で解像度が落ちない　GOOD
  • 色の表現に限りがある　BAD
  • 複雑な色や形の表現は苦手　BAD

 

 

ラスターファイルのメリット・デメリット

ラスターファイルは、細かい粒子の「ビット」を使うことによって、複雑な色が表現できます。

例えば、WEB、ポスター、チラシ、写真など、様々なメディアに使用されます。
一方で、美しい色を表現するためにたくさんの「ビット」を使用するため、ファイル容量が重くなります。
また、生成したサイズよりも大きくすると、解像度が落ちてしまうため（つまり、上図のように拡大するとギザギザになる）、ラスターファイルの拡大は、基本的にご法度です。
  • 拡大・縮小で解像度が落ちる　BAD
  • ファイル容量が重くなる　BAD
  • 複雑な色や形の表現が得意　GOOD

 

 

 

 

SVGファイルはどんな時に使うの？

WEB制作においては、SVGファイルは以下の観点から欠かせない存在となります。
  • 容量が軽い
  • 解像度が落ちない
  • あとで編集するのがラク
  • コードで編集するのがラク
ひとつひとつ、見て行きましょう。

 

 

 

容量が軽い

SVGファイルは、ロゴやアイコンなど、パスデータから作られる小さくてシンプルなデータなら、非常に軽くて扱いやすいファイルです。

逆に、複雑な色や形の表現がある場合はラスター形式のファイルにした方がいいので、どちらの画像形式にすべきなのかは、状況によって判断できる経験が必要です。

 

 

 

解像度が落ちない

拡大・縮小によって解像度が左右されないため、WEBサイト内に一つ配置できれば、デスクトップパソコンでもスマホでも、同じようにきれいな画像として読み込ませることができます。

 

 

 

あとで編集するのがラク

画像ファイルは、どうしても、その画像自体を編集しなければならないことがあります。

SVGなら基本的にパスデータで作成された図を、SVG形式に出力したものなので、少し形を整えたり、大きくしたりするなど、自由自在に編集ができます。

 

 

 

コードで編集するのがラク

SVGはそもそも図を数値で表現する画像なので、CSSでの制御ができます。

サイズ、色、アニメーションによる変形など、もちろん編集できる限界はありますが、コードの修正だけで画像を動かせるのはありがたいですね。

 

 

 

 

SVGファイルは便利！だけど注意点も…

SVGファイルの、もともとのデータは基本的にAdobe IllustratorやAdobe Photoshop、Adobe XDなどのグラフィックソフトで作成されたパスデータです。

パスデータは「点」と「点を結ぶ線」で形が作られ、「塗り」と「線」によって色や線の太さなどが表現されます。

これらを踏まえて注意点があります。

 

 

●複雑な図で使用するべからず！

SVGファイルとして取り扱う場合、図の情報が数値化されるため、複雑であればあるほど容量が重くなります。

例えば、形を作るための「点」が多かったら、それら一つ一つを情報としてとらえるので、容量の重さにつながります。

 

見た目がきれいで、かつできるだけ容量を軽くする（＝シンプルな形にする）ための図を作るデザイン能力が求められます。

 

 

 

●SVGファイルをコードだらけにしないように！

SVGファイルの中身を、テキストエディタなどで見てみてください。コードが表示されると思います。

このコードがあるおかげで、SVGファイルのメリットの恩恵を受けられるわけですが、図が複雑になればなるほど、このコードも複雑になります。

 

図のレイヤー構造を理解して、グループ化やパスファインダーを駆使して、できるだけシンプルなSVGファイル制作を心掛けましょう。

 

 

 

●後で編集できる形にすること！

SVGファイルも、作り方次第では、後で編集するのが大変になってしまうことがあります。

線と塗りが混ざっている場合、拡大・縮小によって図が潰れてしまったり、CSSでうまく調整できなかったりします。

 

これはSVGの構造に詳しいことと、全て「塗り」か「線」、もしくはそれぞれをわかりやすい形で作成するデザイン能力の双方が求められます。

 

 

 

●テキストをSVGファイルにする場合はアウトライン化を忘れずに！

SVGファイルはフォントデータも保存します。

CSSの設定によっては、SVGのフォントが読み込まれず、ブラウザのデフォルトのフォントが使われてしまって、デザインが崩れる場合があります。

 

あたかもパスデータとして保存できているかのように見えるSVGファイルですが、図にテキストを使った画像のときはアウトライン化を忘れないようにしましょう。

 

 

 

 

まとめ：SVGの取り扱いについて

SVGはメリット・デメリットがあるベクター形式の画像です。
細かいことではありますが、WEBサイト表示速度や汎用性・可逆性においても非常に有用で侮れない存在です。
制作においてはデザイン能力だけでなく、コードに関する知識も必要です。

 

「弊社にはデザイナーしかいない…」
「デザインデータを作り直す技術を持ってない…」
「ラスター形式、ベクター形式の適切な判断ができない…」

 

アレグビットではどちらの側面もカバーできます！

（※もちろん、無闇に改変したりは決していたしません！！）

 

上記にあげたようなお悩みをお持ちの方は、是非、弊社にご相談ください！
ブログTOPに戻る