PNG・JPGとSVGの違いと使い分け
「結局どれで保存すればいい？」を解決。3つの画像形式の得意・不得意を比較し、用途別のベストな選び方をまとめます。
画像を扱っていると必ず出てくる PNG・JPG・SVG。名前は知っていても違いは意外とあいまいです。まず大前提として、PNGとJPGは「ラスター（ピクセルの集まり）」、SVGは「ベクター（図形の数式）」という根本的な違いがあります。
ひと目でわかる比較
- 拡大への強さ：SVG ◎（無限に鮮明）／ PNG・JPG △（拡大でボケる）
- 写真の表現：JPG ◎ ／ PNG ○ ／ SVG ✕（不向き）
- 透過（背景ぬき）：PNG ◎ ／ SVG ◎ ／ JPG ✕
- ファイルサイズ：写真＝JPGが軽い／ ロゴ・アイコン＝SVGが軽いことが多い
- 編集のしやすさ：SVG ◎（色・形を後から変更可）／ PNG・JPG △
- アニメーション：SVG ◎（CSS/JSで動かせる）／ PNG・JPG ✕
それぞれの得意分野
JPG（.jpg / .jpeg）
写真向き。色数の多い自然な階調を小さいファイルで表現できます。半面、透過はできず、保存のたびに少しずつ劣化する「非可逆圧縮」です。写真・サムネイルに最適。
PNG（.png）
透過ができ、文字やUIのような輪郭のはっきりした画像をきれいに保てます（可逆圧縮＝劣化しない）。写真に使うとJPGより重くなりがち。透過ロゴ・スクリーンショット・UIパーツに最適。
SVG（.svg）
ロゴ・アイコン・単色イラスト向き。拡大しても劣化せず、軽く、編集・アニメも可能。写真には不向き。ロゴ・アイコン・図形に最適。
迷ったときの目安：写真なら JPG／透過や画面用パーツなら PNG／ロゴ・アイコン・図形なら SVG。
PNG・JPGをSVGに変換できる？
できます。ただし向き・不向きがあります。ロゴ・線画・アイコンのように「色数が少なくくっきりした画像」なら、輪郭をなぞってきれいなSVGに変換できます。一方、写真やグラデーションの多い画像は変換に不向きで、無理に変換すると破綻します。
NAZORUは、PNG・JPGをブラウザ内だけで・無料でSVGに変換します（画像は外部に送信されません）。ロゴ・線画・アイコンなら数クリックできれいなベクターになります。