FileHint
JAEN

SVG と PNG の違い — どちらで書き出すべきか

ロゴやアイコンはベクター SVG、写真や UI スクリーンショットは PNG。拡大に強いのは SVG、配布互換性が高いのは PNG、という基本軸で選べば迷いません。

著者: FileHint 編集部監修: ネットウィズ合同会社編集方針
.svgvs.png

ざっくり判断軸

  • ロゴ / アイコン / 図表 → SVG
  • 写真 / UI スクリーンショット / ビットマップ素材 → PNG
  • CSS / JS で色や形を操作したい → SVG
  • メールや SNS など配布環境を選びたい → PNG

特徴比較

項目 SVG PNG
方式 ベクター（XML） 可逆ビットマップ
解像度 無限に拡大可能 固定解像度
透過 あり あり
ファイルサイズ シンプルな図形は小さい / 複雑なら PNG より大きい場合も 中程度
アニメーション あり（SMIL / CSS / JS） APNG のみ
セキュリティ XSS 注意（<script> を含めうる） ほぼ無害

SVG を選ぶべき場面

  • アプリ UI のアイコン群（多言語で複数解像度を用意する代わりに 1 ファイル）
  • レスポンシブに伸縮する図表
  • CSS 変数で色を動的に切り替えたい UI

PNG を選ぶべき場面

  • 非対応環境（旧メーラー / 組み込み機器 / OG 画像のフォールバック）
  • 写真のような連続諧調のラスタ画像
  • 印刷用に高 DPI の固定解像度が必要な場合

運用のコツ

  • SVG は <img src="...svg"> で埋めると外部 CSS から色変更できません。<svg> をインライン化するか、CSS の mask-image を使う。
  • PNG の肥大は pngquant でロスィ化、あるいは WebP 変換を検討。

出典