SVG は画像を次のように保存します 数学的な形状 PNG はピクセルの固定グリッドを保存しますが、ぼやけずに任意のサイズに拡大縮小できます。その 1 つの違いが選択を決定します。ロゴ、アイコン、拡大縮小が必要なフラットグラフィックには SVG、写真や複雑な詳細には PNG が使用されます。 SVG (Scalable Vector Graphics) は、2001 年に W3C によって標準化された XML ベースの形式です。 PNG (Portable Network Graphics) は 1996 年に開発されたラスター形式です。この比較では、ベクターとラスター、スケーリングとファイルサイズ、透明度、編集、ブラウザのサポート、およびどこで使用するかについての明確なルールをそれぞれが処理する方法について説明します。

解決する問題が異なるため、どちらの形式も全体的に優れているというわけではありません。 SVG は、さまざまなサイズで表示されるグラフィックスに最適です。写真や詳細な画像には PNG が唯一の賢明な選択です。画像がどのファミリーに属しているかを知ることで、コンバーターを開く前に質問の答えが得られます。

ベクターとラスター

2 つの形式は、逆の方法で画像を記述します。 SVG には、ここに円を描く、このパスをその色で塗りつぶすなどの指示がリストされているため、ブラウザーは任意のサイズで新鮮にレンダリングします。 PNG には実際の色が保存されます。 すべてのピクセル モザイクのように格子状に配置されます。ベクターはきれいなエッジを持つ形状に適しています。ラスターは、何百万ものユニークなピクセルが形を表現できない写真に適しています。これが、両者の実質的な違いの根源です。

たとえ話が役に立ちます。ベクトルはレシピです。どのスケールでもそれに従えば、同じ料理が得られます。ラスターは完成した料理の写真です。拡大すると、より大きくぼやけたピクセルが表示されるだけです。レシピはどのサイズでも完璧なままです。写真ではそうではありません。

スケーリング: SVG の勝利

スケーリングは SVG の決定的な利点です。 SVGロゴはそのまま残ります 16 ピクセルのファビコンから看板まで非常に鮮明、各サイズで計算が再計算されるためです。 PNG は、解像度を超えて拡大するとすぐにぼやけます。これは、ソフトウェアが決してキャプチャされなかったピクセルを発明する必要があるためです。複数のサイズで表示されるものについては、PNG が異なる解像度で複数のエクスポートを必要とする場合、SVG は 1 つのファイルを提供します。

これは思っている以上に重要です。最新の画面は小型の携帯電話から大型の 4K モニターまでさまざまですが、デザインはどの画面でも鮮明に見える必要があります。 SVG は、単一のファイルからすべての画面を処理します。 PNG には小さいバージョン、大きいバージョン、そして多くの場合 Retina バージョンが必要であり、管理するアセットが倍増します。

ファイルサイズ

ファイルサイズは、PNG とは逆に、サイズではなく複雑さによって決まります。 SVG で測定可能なシンプルな 2 色のロゴ 数キロバイト どの縮尺でもそのサイズを維持します (多くの場合、PNG よりも小さくなります)。ただし、SVG のサイズは形状の数に応じて大きくなるため、トレースされた写真は PNG の何倍も大きくなり、レンダリングが遅くなります。 PNGのサイズはピクセル数に応じて大きくなるので、大きな写真はどうしても重くなります。

教訓は、形式を内容に一致させることです。フラットアイコンの場合、SVG は小さく、無限に拡張可能です。詳細な写真の場合、SVG は何千ものパスに膨らみますが、PNG は予測可能なサイズのままです。形式名ではなく、複雑さが重みを左右します。

透明性

どちらの形式も透明性をサポートしているため、ここではどちらも優先されません。 SVG はこれをネイティブに処理します。これは、図形の背後に塗りつぶしがない場合があり、PNG では フルアルファチャンネル 滑らかで部分的な透明感を実現します。どちらの形式でも、ロゴは背景の上からでも透けて表示されます。違いは、SVG の透明度が形状記述の一部であるのに対し、PNG はピクセルごとに不透明度の値を保存することだけです。

編集と柔軟性

編集では、グラフィックスには SVG が優先されます。 SVG は形状とそのパスを説明するテキストであるため、 CSSで色を変えてアニメーションさせる、内部のテキストは実際のテキストのままであり、スクリーンリーダーが読み取ったり、検索エンジンでインデックスを作成したりできます。 PNG は固定ピクセルであるため、色を変更するにはソースから再エクスポートする必要があります。ロゴのスタイルを変更したり、テーマを変更したり、アニメーション化する場合は、SVG の方がはるかに柔軟です。

ブラウザのサポート

サポートは両方に共通であるため、選択を決定するものではありません。どのブラウザでもプラグインなしで SVG と PNG を読み取ることができ、どちらも長年にわたって使用されてきました。実際の違いはコンテキストです。SVG は Web ページやアプリのインターフェイスに属しますが、PNG は電子メール、ドキュメント、および SVG を受け入れない可能性のある古いソフトウェアでも機能します。 Web サイトの場合は、どちらも安全です。電子メールのロゴの場合、PNG がより信頼性の高い選択となります。

それぞれをいつ使用するか

ルールはシンプルなので覚えておく価値があります。

SVGを使用する 拡大縮小して鮮明な状態を維持する必要があるロゴ、アイコン、チャート、図、線画の場合。
PNG を使用する スクリーンショット、詳細なグラフィック、ソフトエッジまたは多くの色を含む画像に適しています。
写真にはどちらも使用しない 長期的には、JPG または WebP は、PNG よりもはるかに小さい写真を圧縮します。

ブランドアセットのマスターベクターファイルを保持し、電子メールや一部のアプリのアップロードなど、SVG が受け入れられない場合は PNG コピーをエクスポートします。

SVGとレスポンシブデザイン

レスポンシブデザインは SVG が活かせる分野です。最新のサイトは、携帯電話、ラップトップ、4K モニター上で鮮明に見える必要があり、SVG はその 3 つすべてを処理します。 任意のピクセル密度で 1 つのファイル。小さい、大きい、Retina を個別にエクスポートする必要はなく、ブラウザーが画像を高解像度の画面に拡大するときにぼやけることもありません。ベクターは、レイアウトが要求するサイズに合わせて、それ自体を鮮明に再描画するだけです。

PNG ではこれに匹敵するものはありません。 Retina ディスプレイで鮮明さを維持するには、PNG を 2 倍の解像度でエクスポートする必要があります。これによりファイルサイズが 2 倍になりますが、それでもそれを超えて引き伸ばすとぼやけてしまいます。レスポンシブレイアウト用に複数の PNG サイズを管理すると、単一の SVG で削減できる実際のメンテナンスコストがかかります。

PNG が実際に SVG に勝つとき

PNG は、その評判が示すよりも多くの訴訟で勝利を収めています。任意の画像 写真のディテール、グラデーション、テクスチャ、またはソフトシャドウ これを SVG にトレースすると肥大化し、醜い混乱が生じるため、PNG に属します。スクリーンショットは、ベクトル化されていないインターフェイスの詳細とテキストが混在しているため、PNG の領域に属します。また、数百色を使用した複雑なイラストは、数千のパスからなる巨大な SVG よりも PNG の方が小さくてきれいです。

人々が犯す間違いは、SVG が常に最新の優れた選択肢であると想定していることです。これは、フラットでハードエッジのグラフィックスにのみ優れています。詳細な画像を SVG にプッシュすると、望んでいたものとは逆に、レンダリングが遅くなる大きなファイルが得られます。

SVG とセキュリティに関する注意事項

SVG には、PNG にはない考慮事項があります。コードであるため、SVG ファイルです。 スクリプトを含めることができます。サイトにアップロードされた悪意のある SVG は、理論上、表示時に JavaScript を実行する可能性があります。これが、多くのプラットフォームがユーザーがアップロードした SVG をサニタイズまたは拒否する理由であり、既知のソースからの SVG のみを信頼すべき理由です。 PNG は純粋なピクセルデータであるため、そのようなリスクはありません。独自のロゴやアイコンの場合、これは問題ではありませんが、一部のアップロードフォームで SVG ではなく PNG が受け入れられる理由が説明されています。

SVG に変換する際のよくある間違い

2 つの間違いにより、ほとんどの PNG から SVG への変換が台無しになります。 1つ目は 写真をベクター化しようとしていますこれにより、数千のパスと元のファイルよりも大きなファイルが生成されます。 2 つ目は、自動トレース後に SVG 内に埋め込まれた元のビットマップを残すため、ファイルは実際には SVG ラッパー内の PNG であり、何も得られません。フラットなグラフィックのみをトレースし、ブランドロゴの場合は、自動トレースを信頼するのではなくベクターエディターで再描画すると、きれいなジオメトリと最小のファイルが得られます。

PNGをSVGに変換する方法

PNG を SVG に変換するということは、ベクトル化、つまりピクセルをパスにトレースすることを意味します。これは、 フラットなロゴ、アイコン、ラインアート、トレースできるきれいな形状がない写真の場合は失敗します。私たちの PNGからSVGへのコンバーターブラウザで単純なグラフィックをトレースするため、何もアップロードされません。所有しているブランドロゴの場合、ベクターエディターで再描画すると、自動トレースよりもきれいな結果が得られます。写真については、 PNGからJPGへのコンバーター代わりに。

よくある質問

SVG はレスポンシブデザインに適していますか?

はい、理想的です。 1 つの SVG は、どの画面およびピクセル密度でも鮮明なままですこれにより、小さい、大きい、網膜の PNG を個別にエクスポートする必要がなくなります。

一部のサイトが SVG アップロードを拒否するのはなぜですか?

なぜなら SVG にはスクリプトを含めることができます、PNGとは異なります。プラットフォームはセキュリティのためにユーザーの SVG をサニタイズまたはブロックするため、一部のフォームは PNG のみを受け入れます。

変換した SVG が PNG より大きいのはなぜですか?

あなたはおそらく 写真をトレースするか、ビットマップを埋め込んだままにしておきます。フラットグラフィックのみをベクトル化し、トレース後に元の画像を削除して、SVG がピクセルではなくパスを保持するようにします。

SVG は PNG よりも優れていますか?

グラフィックについては、そうです。 SVG は小さなサイズでもぼやけずに拡大縮小します。写真の場合は、ベクターとして保存できるきれいな形状がないため、PNG が勝ちます。

SVGとPNGの違いは何ですか?

SVGは スケーラブルな数学。 PNG はピクセルの固定グリッドです。 SVG はどのサイズでも鮮明なままですが、PNG は解像度を超えて拡大するとぼやけてしまいます。

写真にSVGを使用できますか?

いいえ、役に立ちません。 写真には何百万もの色とソフトエッジがある トレースする形状がないため、SVG 写真は大きくて乱雑になります。 PNG または JPG を使用します。

SVG と PNG ではどちらが小さいですか?

単純なグラフィックの場合は SVG。 2 色のロゴは SVG として数キロバイトです 任意のサイズで。写真の場合は、フォトフキダシをトレースするため、PNG の方がサイズが小さくなります。

SVGは透明性を維持しますか?

はい。 SVG は透明性をネイティブにサポートします、PNG のアルファチャネルと同様に、ロゴは背景の上でも透けて表示されます。

すべてのブラウザは SVG をサポートしていますか?

はい。 最新のブラウザはすべて SVG と PNG を読み取ります プラグインなしで。 SVG は Web ページに適していますが、PNG は電子メールや古いソフトウェアでも動作します。

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

それを追跡します。 ベクタライザーはフラット PNG をトレースして SVG パスに変換します、ロゴやアイコンには機能しますが、写真には機能しません。

SVG を作成した後に編集できますか?

はい。 SVG パスは任意のベクターエディターで開きます ファイルは固定ピクセルではなく、形状を説明するテキストであるため、CSS を使用して色を変更したりアニメーションを作成したりできます。

Web サイトのロゴにはどの形式を使用すればよいですか?

SVG。 1 つのファイルからすべての画面でシャープに拡大縮小します、そのテキストは検索エンジンで読み取れる状態になります。 SVG が受け入れられない電子メール用には PNG を保持してください。

アイコンには PNG と SVG のどちらが適していますか?

SVG、スケーリング用。 SVG アイコンはどのサイズでも鮮明なままです一方、PNG アイコンは複数のエクスポートが必要で、拡大するとぼやけます。

SVG と PNG は、異なる問題を解決します。SVG は、どのサイズでも鮮明なスケーラブルな計算を保存しますが、PNG は、拡大するとぼやけるピクセルの固定グリッドを保存します。 SVG は、CSS で拡大縮小、編集、アニメーション化する必要があるロゴ、アイコン、線画に最適で、1 つのファイルからすべての画面を提供します。写真、スクリーンショット、詳細な画像では PNG が優先され、SVG が受け入れられない作品では PNG が優先されます。フォーマットをコンテンツに合わせて、上記のコンバーターを使用して、単純なグラフィックをベクトル化したり、ラスター写真を処理したりすることがすべてブラウザーで行えます。

クイックリファレンス: SVG または PNG

手を伸ばす SVG 画像が拡大縮小する必要があるロゴ、アイコン、グラフ、または線画である場合、CSS を使用して色を変更またはアニメーション化したい場合、または 1 つのファイルであらゆる画面サイズに対応する必要がある場合。手を伸ばす PNG 画像がスクリーンショット、詳細なグラフィック、またはグラデーション、テクスチャ、ソフトエッジのあるものである場合、および SVG を拒否する電子メールや古いソフトウェアで画像を動作させる必要がある場合。境界線はシンプルです。フラットでハードエッジのグラフィックスはベクターに、詳細なものはすべてラスターにします。

ベクターマスターを保持する

どのブランドアセットでも、オリジナルをベクターマスターとして保持し、必要に応じてラスターコピーをエクスポートします。単一の SVG ロゴからファビコン、ソーシャルアバター、印刷ファイルを生成でき、それぞれがオンデマンドで適切な形式とサイズにエクスポートされます。逆に、ラスター PNG からベクターに戻す作業はトレースを意味し、きれいなジオメトリを完全に復元することはできません。したがって、可能な場合はマスターを SVG として保存し、PNG エクスポートをいつでも再生成できる使い捨てのコピーとして扱います。

結論

SVG と PNG は、専門家というよりもライバルではありません。ベクトルは形状とスケールを永遠に記述するため、ロゴとアイコンは SVG に属します。ピクセルは詳細をキャプチャするため、写真とスクリーンショットは PNG に属します。 1 つの質問をして選択してください。この画像には、きれいで平らな形状があるか、写真の細部が細かいかなどです。その答えによって毎回の形式が決まり、ベクターマスターを保持しておけば、いつでも必要なラスターコピーをエクスポートできることになります。