FORMAT COMPARISON
SVG vs WebP
SVGはベクター画像、WebPは主にラスター画像として使われます。ロゴや図形か、写真やピクセル画像かで出発点が変わります。
SVGとWebP、どちらを選ぶ？
ロゴ・アイコン・図形はSVG、写真やラスター素材のWeb配信はWebPを候補にし、対象環境で表示を確認します。
SVG向き
ロゴ・図形・アイコン
- 拡大縮小が必要な図版
- UIアイコン
WebP向き
Web画像
- Web配信
- 写真
- 透過画像
基本情報を比較
SVGとWebPの主な違いを確認できます。
| 項目 | SVG | WebP |
|---|---|---|
| 拡張子 | .svg | .webp |
| MIME Type | image/svg+xml | image/webp |
| 主な用途 | ロゴ・図形・アイコン | Web画像 |
| 圧縮 | 該当なし | 非可逆／可逆 |
| ベクター | 対応 | 非対応 |
| 開く方法 | ブラウザ、ベクター編集ソフト、対応ビューアで開けます。 | 対応ブラウザや画像ビューア、編集ソフトで開けます。 |
| 書き出し・変換 | PNGなどのラスター画像へ書き出せます。 | WebPからJPEGへ書き出すと透過を保持できず、非可逆圧縮になります。PNGへ書き出す場合は、静止画として出力するのか、アニメーションを別の方法で扱うのかを確認します。JPEGやPNGからWebPへ変換する場合も、可逆・非可逆、透過、アニメーションの要件を先に決めます。 |
用途別の選び方
作りたいものや使う場面から選べます。
拡大縮小が必要な図版
ロゴ・図形・アイコン
SVG向きUIアイコン
ロゴ・図形・アイコン
SVG向きWeb配信
Web画像
WebP向き写真
Web画像
WebP向き確認ポイント 1
SVGはベクター画像として扱われる
使い分け確認ポイント 2
WebPはラスター画像の配信に使われる
使い分け選ぶ理由を詳しく
- 拡大時の見え方と編集方法が異なる