PNGとSVG

高品質のデジタルロゴやグラフィックを扱う場合は、PNGまたはSVGで保存することをお勧めします。どちらも高解像度で拡大にも耐えうる、汎用性の高い形式です。PNGとSVGの違いと使用方法を確認しましょう。

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はベクターファイルのため、サイズ制限はありません。

PNG、SVGと他のファイル形式との比較

EPSとSVGの画像

EPSとSVG

古くからのファイル形式であるEPSとSVGの比較をご覧ください。

JPEGとPNGの画像

JPEGとPNG

標準的なラスター画像ファイルから、用途に適した形式を見つけましょう。

PNGとTIFFの画像

PNGとTIFF

高精細で大規模な画像の管理に適したファイルです。 

GIFとPNGの画像

GIFとPNG

PNGが次世代のGIFである理由と、次のプロジェクトに適しているかどうかを確認しましょう。

Adobe Illustratorを購入しましょう

美しいベクターアートとイラストを作成できます。

7日間の無料体験の後は月額2,728 円円(税別)