SVGとは？特徴・メリット・使いどころ

「SVGって何？」をゼロから。ベクター形式の仕組みと、ロゴやアイコンにSVGが選ばれる理由をやさしく解説します。

SVG（Scalable Vector Graphics＝スケーラブル・ベクター・グラフィックス）は、点や線・曲線の「座標と数式」で図形を表現する画像形式です。PNGやJPGのように色のついた「点（ピクセル）」を並べるのではなく、「ここからここへ、この曲線を引く」という設計図を持っているのが最大の特徴です。

ラスターとベクターの違い

画像には大きく2種類あります。

• ラスター画像（PNG・JPGなど）：細かいピクセルの集まり。写真のような複雑な階調が得意な一方、拡大すると1つ1つのピクセルが目立ってボケたりギザギザになります。
• ベクター画像（SVG）：図形を数式で持っているため、どれだけ拡大しても計算し直してくれて、常に鮮明です。名刺サイズでも看板サイズでも同じ1ファイルで対応できます。

SVGのメリット

• 拡大・縮小しても劣化しない：Retinaディスプレイでも4Kでも常にくっきり。
• ファイルが軽いことが多い：ロゴやアイコンのような単純な図形なら、PNGより小さくなることも珍しくありません。表示速度（＝SEO）にも有利です。
• 編集できる：色や形をあとから変更できます。テキストエディタやIllustratorで開いて微調整も可能。
• CSS・JavaScriptで動かせる：Webでホバー時に色を変えたり、線を描くアニメーションを付けたりできます。
• 背景を透過できる：どんな背景色の上にも自然に置けます。

SVGのデメリット・向かないもの

万能ではありません。写真のように色数が多く複雑な画像はSVGに向きません。無理にベクター化するとファイルが巨大になり、見た目も不自然になります。写真はJPG、透過や図の多いUIはPNG、というように使い分けます。

SVGが向いている用途

• 会社やお店のロゴ（名刺・Web・看板・SNSアイコンまで1つで）
• Webサイトのアイコンやピクトグラム
• 単色〜数色のイラスト・マーク・地図
• 印刷にもWebにも使い回したい図形

SVGはどうやって用意する？

方法は主に3つです。

1. デザインツールから書き出す：Illustrator や Figma などで作ったデータをSVGで書き出す。
2. 制作者から元データをもらう：ロゴを作った制作者にベクター（AI/SVG）を依頼する。
3. 手元のPNG・JPGをSVGに変換する：元データが無いときは、画像を自動で「なぞって」ベクター化します。NAZORUはこの3番目を、ブラウザの中だけで・無料で行うツールです。

NAZORUで画像をSVGに変換する →