ウェブサイト向けの画像を保存するにはどちらの形式が適していますか。PNGまたはSVG？

ウェブサイト向けの透明な背景の画像をエクスポート/保存する場合、PNGまたはSVGとして保存する必要がありますか？どうして？

PNGは、単にSVGよりも受け入れられている形式であるという事実のために言うだけです。

ここでの簡単な答えは、両方を使用することです。

SVGをオプションとして指定したという事実は、SVGはロゴ、アイコン、クリップアートのようなイラストなどのラインアートグラフィックにのみ適しているため、写真グラフィックを意図したユースケースとして除外できることを意味します。

写真グラフィックにこの選択を検討している場合、選択の余地はありません。PNGはおそらく常に優れています。SVGが実行可能なオプションであるグラフィックの場合、SVGはPNG / JPEGフォールバックを備えた最適なオプションです。PNGには多くの長所がありますが、スケーラビリティとファイルサイズに関しては、SVGに適合しないことがよくあります。

どちらか一方のみを使用すると、後方互換性またはプログレッシブエンハンスメントのいずれかを犠牲にする必要があります。

現時点では、PNGはSVGよりも多くのブラウザーでサポートされていますが、新しくリリースされたデバイスの解像度は常に向上しています。つまり、PNGはさまざまな解像度に基づいて提供する必要があります。^{（メディアクエリ、JavaScript、またはユーザーエージェントスニッフィングを介して）}またはブラウザーによってスケーリングされ、不完全な結果が生じる可能性があります。

未来が保持していることがわかっているものを見てください。永遠に高い解像度、幅広いサポート、インターネット全体でのSVGの幅広い使用。来るもののために構築するのは理にかなっています。

一般的に、ウェブサイトは長年続くように構築する必要があります。5年後、あなたの美しく後方互換性のあるウェブサイトは、古いブラウザをまだ使用しているインターネットユーザーの2％にとって驚くほどに見えるかもしれませんが、狂った解像度の最新のブラウザではかなり貧弱です-そのため、妥協。

2014年11月のオプション

1. PNGのみ

   • 品質のために、画面サイズと解像度に応じて少なくとも5つの異なるバージョンを提供する必要があります-これは非常に控えめな推測であり、非常に徹底したい場合は同じ画像の10-15バージョンになる可能性があります。これも実装に時間がかかります。

   • 単一のグラフィックを提供することを選択し、ブラウザでそれを拡大縮小した場合、結果はおそらく完全ではなく、拡大縮小の量によってはいものになる可能性があります。

   • 多数のメディアクエリは、CSSを不必要に膨張させ、ページの読み込み速度に悪影響を及ぼす可能性があります。

   • 古いブラウザやデバイスでは見栄えがよくなりますが、新しいブラウザやデバイスではそれほど見栄えがよくありません。

2. 単一のPNG / JPEG / GIFフォールバックを持つSVG

   • どこでもSVGを使用してから、SVGをサポートしないブラウザー用に別の形式にフォールバックすることができます。主な利点は、すべての異なる解像度に対して1つのファイルしか必要ないことです。

   • 古いブラウザのユーザーが不完全にスケーリングされたグラフィックスで生活できることを妥協して受け入れる場合、PNG、JPEG、またはGIF形式の各ファイルのもう1つのバージョンのみが必要になります。

   • これは、PNGのみのメディアクエリと同様の実装に時間がかかります。おそらくそれよりも短いため、おそらくほぼ同じ価格になります。

   • 古いテクノロジーを犠牲にして、すべての新しいデバイスで見栄えがよくなります。

3. 解像度と画面サイズに依存する複数のPNG / JPEG / GIFフォールバックを持つSVG

   • 最初にSVGを提供し、次にSVGをサポートしていないブラウザー用に解像度依存のPNGを提供できます。これは最も徹底し、ほとんどの前後に互換性のある、最も一貫して最もだろう高価な時間がかかりオプション。

   • おそらく、1と2を合わせた時間と、よじれを解決するために少し余分に時間がかかります。

   • ^ほとんどすべてのデバイスで驚くほどに見えます。

要約すると、私はそれはあなたがより多くの下位互換性以上のプログレッシブ・エンハンスメント、そしてどのくらいのを探しているかどうかに依存だと思うお金、時間、あなたが費やす必要があります。

SVGは、明確な利点であるベクトルグラフィックを持っている場合、スケーラブルです。ピクセルグラフィックの場合、PNGの方が適しています。欠点は、Internet Explorerが次のバージョン9（プラグインを使用する前）でのみSVGをサポートすることです。モバイルブラウザでは、SVGのサポートが制限されている場合もあります。

編集：ClemDesmが指摘するように、IE8がサポートされているため、古いIEバージョンは完全に透過的なPNGをサポートしていません。非透過PNGは正常に機能します。Computerishの答えには、今のところベクター画像を処理するための優れたソリューションがあります。ベクター画像をSVGのままにして、Web用にPNGとしてエクスポートします。私はこの解決策に完全に同意します。

ウェブサイトには間違いなくPNGを使用してください。SVGは、十分に広くサポートされていないだけで、フラット化されたエクスポートに関してPNGに比べて（あるとしても）重要な利点はほとんどありません。ただし、作業コピーはすべてSVGに保存してください。

安全のためにPNGを使い続けます。SVGは、多くの大手インターネット企業やブラウザでまだ完全に受け入れられていません。SVGはスケーラブルであり、多くの場合不必要なベクターですが、より多くのスペースを取り、Webサイトを過度に複雑にします。

私はあなたの質問に答えたことを望みます:)

SVGはグローバルに受け入れられておらず、PNGのスケーリングに時間がかかる人もいますが、Adobe Illustrator内でアイコンを作成すると、「合理的な」量を拡大または縮小するのに最適です。