PNGとSVGの違いとは?
PNGとSVGはどちらもWebでよく使われる画像フォーマットですが、画像データの保存方法は根本的に異なります。この違いを理解しておくことで、ロゴやアイコン、写真、カットファイルに適したフォーマットを選べるようになります。
PNGファイルとは?
PNG(Portable Network Graphics)ファイルはラスター画像です。JPEGと同様に、色のついたピクセルが固定グリッド状に並んでおり、各ピクセルがそれぞれ独自の色情報を持っています。そして、そのピクセル総数はファイルが作成された時点で決まります。またPNGは本物のアルファ透過にも対応しているため、アイコンやスクリーンショット、透過背景のロゴなどの標準フォーマットとして使われています。
PNGは単なるピクセルのグリッドであるため、拡大するということは同じピクセルをより広い面積に引き伸ばすことを意味します ― これが、PNGを元のサイズより大きく拡大したときにぼやけたり、目に見える「ブロック状のガタつき」が生じたりする原因です。
SVGファイルとは?
SVG(Scalable Vector Graphics)ファイルは、画像を個々のピクセルとしてではなく、線・曲線・塗りといった数学的な図形やパスの集合として記述します。円は「この半径を持つ円」として保存されるのであって、何千もの個別に色付けされたドットとしては保存されません。
これこそがSVGを無限に拡大縮小可能にしている理由です ― ブラウザやデザインツールは必要なサイズごとに図形を描き直すため、SVGロゴはスマートフォンのアイコンでも看板でも同じようにくっきりと表示されます。SVGはプレーンテキスト(XML)でもあるため、どんなテキストエディタやベクターデザインツールでも編集できます。
PNGとSVGの主な違い
| PNG | SVG | |
|---|---|---|
| 基本となるデータ | ピクセルのグリッド | 数学的なパスと図形 |
| 拡大 | 元のサイズより大きくすると画質が劣化 | 画質を落とさずどんなサイズにも拡大可能 |
| ファイルサイズ | シンプルな図形では大きくなりがち | ロゴやアイコンでは通常より小さい |
| 編集のしやすさ | ピクセル編集のみ(Photoshopなど) | 図形を直接編集可能(Illustrator、Inkscapeなど) |
| 透過 | 対応(アルファチャンネル) | 対応(塗り/不透明度) |
| 向いている用途 | 写真、複雑なテクスチャ | ロゴ、アイコン、イラスト、カットファイル |
PNGとSVG、どちらを使うべきか
基本的な目安は次のとおりです。
- ロゴ、アイコン、線画、そしてリサイズやカットが必要なものには ― Cricutプロジェクトやレーザーカッター用のファイルも含めて ― SVGを使いましょう。
- 写真や、複雑なグラデーション・テクスチャを含み、単純な図形にうまく変換できない画像にはPNGを使いましょう。
- すでにPNG形式のロゴやアイコンがあり、SVGが必要な場合、手作業で描き直す必要はありません ― 自動的にトレースすることができます。詳しくは画像トレースの仕組みをご覧ください。
よくある質問
PNGファイルの拡張子を.svgに変更するだけでいいのですか?
いいえ。ファイルの拡張子を変更しても、内部のデータそのものは変わりません ― 本当の意味でSVGになるには、PNGのピクセルグリッドをベクターパスへとトレースする必要があります。
SVGは常にPNGより優れているのですか?
すべての用途において優れているわけではありません。ロゴやアイコンのような拡大縮小が必要なグラフィックにはSVGが適していますが、写真についてはベクタートレースによってリアルなディテールが失われてしまうため、PNG(またはJPEG)が今でも正しい選択です。
ブラウザはPNGと同じようにSVGにも対応していますか?
はい。最新のブラウザはすべてSVGをネイティブに表示でき、<img>タグやCSSのbackground-imageが使える場所であれば、どこでもSVGを利用できます。
関連ガイド
PNGとSVGにとどまらない、ラスターとベクターの違いをより深く掘り下げて解説します。
PNGデザインをCricut Design Space用のカット対応SVGに変換する方法。