PNGとSVG

学習内容

• PNGファイルとは
  
• SVGファイルとは
  
• PNGファイルとSVGファイルの違い
  
• PNGとSVG：よくある質問

PNGファイルとは

PNG（Portable Network Graphics）は、ラスターベースのファイルです。高解像度、可逆（ロスレス）圧縮、透明、1,600万色対応などの特徴があります。そのため、グラフィック、ロゴ、チャート、イラストなどのほか、緻密な写真にも最適です。PNGファイルはファイルサイズが大きいため、オンライン写真には適しません。

PNGファイルの詳細を見る

SVGファイルとは

SVG（Scalable Vector Graphics）は、目的に応じて拡大縮小できるため、ロゴやグラフィックに適しています。また、Googleなどの検索エンジンではXMLのプログラム言語を読むことができるため、SVGファイルはwebデザインでも人気があります。SEOやwebサイトのランキングに役立つからです。

PNGとは異なり、SVGはベクターベースです。数学的アルゴリズムを利用して画像を表示しているため、品質を劣化させることなく任意のサイズに拡大できます。

SVGファイルの詳細を見る

PNGファイルとSVGファイルの違い

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の方が適しています。

PNGとSVG：よくある質問

ラスター画像をSVGに変換するにはどうすればよいですか？

JPEGやPNGなどの標準的なラスター画像ファイルをベクターベースのSVGに変換する手順は以下のとおりです。

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

SVGをPNGに変換するにはどうすればよいですか？

Adobe Photoshopを使ってSVGをPNGに変換する手順は以下のとおりです。

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

印刷に最適なベクターファイルはどの形式ですか？

印刷用に非常に適したベクターファイルがいくつかあります。文書に応じて選択してください。その中でも印刷用に最も汎用性が高く、日常的に使いやすいのはPDFです。非常に大きな印刷の場合は、SVGやAIをお勧めします。

PNGとJPEGのどちらを使えばよいですか？

JPEGは非可逆圧縮と24ビットカラーが特徴で、web用写真に使用される最も一般的な画像ファイルです。しかし、JPEGは印刷するとPNGに比べて精細さに欠けます。また、JPEGはスケーラビリティと鮮明度の点でも劣るため、ロゴやグラフィックには向いていません。

PNGとGIFの違いは何ですか？

どちらもweb上の標準的なラスターファイル形式ですが、PNGは基本的にGIFの次世代版です。しかし、それ以外にもいくつかの違いがあり、例えば、PNGはアニメーションに対応していません。

PNGとSVGのファイルにサイズ制限はありますか？

PNGファイルは最大2,500メガピクセルまでです。SVGはベクターファイルのため、サイズ制限はありません。