SVGとは？PNGやJPEGとの違いと使い分け

デザイン・技術2026年10月30日読了時間：約3分

ホームページで使う画像には、JPEG、PNG、SVGなど、いくつかの形式があります。
どれを使えばよいのか迷う方も多いと思います。

この記事では、SVGとは何か、PNGやJPEGとの違いと、使い分けを解説します。

1.SVGは、拡大してもぼやけない画像

SVGは、画像を「点の集まり」ではなく、「線や形の計算式」で表す形式です。そのため、どれだけ拡大しても、ぼやけたり、ギザギザになったりしません。

形式	特長	向いている画像
JPEG	写真のように色の多い画像を、小さな容量で保存できる。透明にはできない	写真
PNG	色の少ない画像をきれいに保存できる。背景を透明にできる	スクリーンショット、透明が必要な画像
SVG	拡大してもぼやけない。シンプルな図なら容量が小さい	ロゴ、アイコン、図形
WebP	JPEGやPNGより容量が小さくなりやすい。透明にもできる	写真やイラスト全般

JPEGやPNGは、決まった数の点（ピクセル）で画像を表します。小さな画像を大きく表示すると、ぼやけてしまいます。高精細な画面のスマートフォンでは、とくに目立ちます。

SVGは、計算式で形を表すため、どんな大きさで表示してもくっきり見えます。ただし、写真のように色や形が複雑な画像は、SVGで表すことはできません（できても容量がとても大きくなります）。

ロゴやアイコンはSVG、写真はJPEGやWebPと使い分けるのが基本です。

<img src="logo.svg" alt="浅草Web屋" width="160" height="40">

ふつうの画像と同じように img タグで使えます。HTMLの中に直接書くと、CSSで色を変えることもできます。

WebPについては、WebPとは？で解説しています。

ロゴのデータがPNGしかありません。

PNGでも使えます。ロゴを作った人やデザイナーに、元のデータ（SVGやAIなど）がないか聞いてみましょう。

SVGは、どのブラウザでも表示できますか？

今の主なブラウザでは、問題なく表示できます。

WordPressでSVGを使いたいです。

プラグインなどで受け付けるようにできますが、安全のため、信頼できるSVGだけを使うようにしましょう。

写真をSVGに変換できますか？

変換するツールはありますが、写真らしさが失われたり、容量が大きくなったりします。写真はWebPやJPEGが向いています。

SVGは、線や形の計算式で表す、拡大してもぼやけない画像の形式です。

まずは、ホームページのロゴがぼやけていないか、スマートフォンで拡大して確かめてみましょう。

画像の形式や、ロゴの表示で困っている場合は、浅草Web屋にご相談ください。