SVG と PNG：どちらをいつ使う
実用的な比較
SVGとPNGはどちらもよく使われるウェブ形式ですが、仕組みが異なります。正しく選べば品質が上がり、サイトの容量が減ります。
決定的な違い
- SVG：ベクター。図形を数式で保存。無限に拡大しても鮮明。
- PNG：ラスター。ピクセルを保存。拡大するとピクセル化。
かんたん比較
- 拡大時の品質：SVGの勝ち（常に鮮明）。PNGは劣化。
- 容量：単純な図形ではSVGが非常に軽い。PNGは特に高解像度で重い。
- 透過：どちらも対応。
- 写真：PNG（やJPG）向き。SVGは写真用ではない。
- 編集：SVGはテキスト/コードで編集。PNGは画像エディタが必要。
- アニメーション：SVGはCSS/JSで可能。PNGは不可（APNGは稀）。
SVGを使うとき
ロゴ、アイコン、フラットなイラスト、グラフ、図。どんな画面やサイズでも完璧に見せたいもの。
PNGを使うとき
スクリーンショット、詳細やテクスチャの多い画像、SVG非対応のプラットフォーム。ベクターの最終共有用としても。
両方のいいとこ取り
SVG（ベクター・編集可）で作業し、必要なときにPNGへ書き出す。svgdeskならSVGを編集し、ワンクリックで高解像度PNGを書き出せます。