PNGとSVG

ラスターとベクター

PNGとSVGの最も基本的な違いは、ラスターファイルとベクターファイルであることです。

PNGは、ピクセルベースのラスター画像形式です。ラスター画像を拡大しすぎると、画質が粗くなり、ピクセル化します。逆に画像が小さすぎると、不明瞭になります。PNGは非常に高い解像度にも対応していますが、無限に拡大できるわけではありません。

これに対して、SVGファイルはベクターベースのため、線、点、図形、アルゴリズムの複雑な数式ネットワークにより構成されています。解像度を維持したまま任意のサイズに拡大できます。

ラスターとベクターの詳細を見る

ファイルサイズ

PNGは高解像度に対応するため通常ファイルサイズが大きくなります。サイズが大きくなると、処理、共有、保存、表示にも時間がかかり、ページの読み込みが遅くなることもあります。オンライン上の写真形式においてJPEGが主流になっているのもそのためです。8ビットの派生PNGもありますが、256色しかサポートしていません。

SVGはPNGと比べてはるかにサイズが小さいため、通常コンピューターやwebサイトで動作が遅くなることはありません（ただし、非常に細かいデザインの場合は、SVGの動作が遅くなることがあります）。ベクター形式のため、品質を損なうことなく拡大縮小できます。

圧縮

SVGは可逆（ロスレス）圧縮方式のため、ファイルサイズを小さく圧縮しても、鮮明度、細部、品質を損なうことはありません。

PNGも5～20％の可逆圧縮が可能で、ファイルサイズの大きさを多少補うことができます。それでもたいていSVGよりサイズが大きくなります。

写真

PNGファイルは、上記の理由によりweb用の写真には向きません。印刷、編集、その他の目的で、非常に精細で高品質なデジタル写真を扱うのに適しています。Adobe Photoshopではよく用いられる形式です。

一方、SVGはピクセルベースではないため、高精細の写真を再現することは困難です。

Webでの使用

PNGファイルとSVGファイルはどちらも、webグラフィック、イラスト、ロゴ、インフォグラフィック、表などの複雑なディテールを表現できます。

しかし、SVGにはXMLプログラミング言語を採用しているという大きな利点があります。つまり、SVGファイルはコードというよりテキストで記述されているため、スクリーンリーダーや検索エンジンが解析でき、アクセシビリティやSEOの観点で優れています。

また、SVGファイルは通常サイズが小さいため、短時間でページに読み込めます。ページの読み込み時間も、検索エンジンのランキングを左右する重要な要素です。

PNGもテキストベースのグラフィックに多少対応していますが、限定的です。

互換性と複雑性

SVGはPNGよりも高度なファイル形式と見なされていますが、すべてのブラウザーとOSに対応しているわけではありません。また、プログラミング言語やベクターベースの構成は、初心者ユーザーには馴染みがなく、使いにくい可能性があります。

これに対してPNGは、webブラウザーとOSで幅広くサポートされている標準的なオンライン形式です。

アニメーション

ラスターベースの類似の画像ファイルであるGIFとは異なり、PNGファイルはアニメーションをサポートしていません。

SVGファイルはアニメーションをサポートしていますが、Adobe Illustratorのネイティブ形式であるAIなど他のファイル形式ほど簡単ではありません。

AIファイルの詳細を見る

透明機能

PNGとSVGは透明機能に対応しています。どちらもオンラインのロゴやグラフィックに適しています。

特に、PNGはラスターベースの透過ファイルとして最適な選択肢のひとつです。ピクセルや透明を扱う場合は、SVGよりもPNGの方が適しています。

1. Adobe Illustratorを開きます。
2. ファイル／開くをクリックして、コンピューターから画像を選択します。
3. 「開く」をクリックします。
4. 上部の「トレース」から「画像トレース」を選択します。
5. 色の変更など、仕様に合わせて変換を調整します。
6. 完了したら、トレース画像を選択して、「グループ解除」をクリックします。これで色付きのシェイプが分離されます。
7. ファイル／書き出しをクリックします。
8. ファイルをSVG形式で保存します。

1. Adobe Photoshopを開きます。
2. ファイル／開くをクリックします。
3. コンピューターからSVGファイルを選択します。
4. 書き出し／書き出し形式／PNGをクリックします。
5. ファイルをPNG形式で保存します。