PNGとSVGの違い：用途に合う形式と変換すべき場面を解説
PNGはピクセル、SVGは数学的な図形でできています。制作物に合わせた選び方と、PNGを本物のSVGに変換する方法を分かりやすく解説します。
PNGとSVGは、同じものの高品質版と低品質版ではありません。異なる種類のファイルであり、どちらが適切かは制作物によります。PNGは、色付きの小さな四角でできたモザイクのようなピクセル画像です。SVGは数学でできています。線、曲線、図形を、コンピューターが指定サイズで毎回描きます。この違いから、ほかの性質も決まります。簡単な目安として、写真や細部の多い画像にはPNG、ロゴ、アイコン、文字、サイズを変えるもの、大きく印刷するもの、機械でカットするものにはSVGを使います。PNGのロゴをSVGにしたいなら、その形式で保存するのではなく、変換します。その工程の品質が結果を左右します。
要点
- PNGはピクセルです。写真、スクリーンショット、透明部分が必要な細部の多い画像に適しています。
- SVGは数学的な情報です。ロゴ、アイコン、文字、サイズ変更、大判印刷、カットするものに適しています。
- 拡大すると違いが分かります。 両方を10倍にすると、PNGはぼやけ、SVGは鮮明なままです。
- PNGの名前を
.svgに変えるだけでは変換できません。 本物のSVGにするにはトレースが必要です。PNGをSVGに変換し、結果を確認してください。 - 偽SVGに注意してください。 PNGを
.svgファイルで包んでも、ピクセルは見えるままで、編集もできません。
実際の違い：ピクセルと数学的な情報
PNGを開いて大きく拡大すると、いずれ四角が見えます。ピクセルの固定格子だからです。元サイズを超えると、コンピューターが四角の間に何を入れるか推測するため、輪郭が柔らかく角ばります。ウェブサイトから取った小さなロゴが、拡大するとすぐぼやける理由です。
SVGは、パス、図形、テキスト、塗りなどのベクター指示を保存できます。そうした幾何学的な要素は、固定のピクセル格子を見せずに、異なるサイズで描き直せます。ただしSVG 2仕様は、ラスター画像の埋め込みやその他の効果も認めています。SVGが解像度に依存しないのは、関係する内容が本当にベクターである範囲に限ります。「ピクセルではなく指示」という考えが初めてなら、画像のベクター化とは何かをご覧ください。
PNGとSVGを一覧で比較
| PNG | SVG | |
|---|---|---|
| 構成 | ピクセル（ラスター） | 数学的な情報（ベクター） |
| ぼやけずに拡大できるか | できない。解像度は固定 | できる。どのサイズにも対応 |
| 図形の編集 | 不可。1枚の平面画像 | 可能。独立したパスと色 |
| 透明部分 | 対応 | 対応 |
| アニメーション | APNGで対応。編集可能な静止画1枚を取り出すには、APNGからSVGへの変換ツールでフレームを選択 | 対応 |
| 写真と細かな描写 | 得意 | 苦手。単純化される |
| ブラウザーとアプリの対応 | ほぼ共通 | 幅広いが、一部の古いアプリやメールソフトは非対応 |
| 一般的なファイルサイズ | 大きめ | フラットな作品では小さく、複雑な作品では大きい場合もある |
| 得意な用途 | 写真、スクリーンショット、細部の多いグラフィック | ロゴ、アイコン、文字、カットファイル |
サイズには注意点があります。「SVGは小さい」とよく言われ、フラットなロゴやアイコンでは通常そうです。しかし、写真のような複雑な画像のSVGは、小さな図形をすべて記述するため、PNGより大きくなる場合があります。サイズ面でSVGが強いのは、単純でフラットな作品です。
どちらを使うかは制作物で決める
どちらか1つが常に優れるわけではなく、作業によって決まります。よくある用途の選び方は次のとおりです。
| 制作するもの | 使う形式 | 理由 |
|---|---|---|
| ウェブサイトのアイコンや単純なUIグラフィック | 対応していればSVG | きれいに拡大できる。実際の圧縮サイズとセキュリティ・アセット処理の要件は比較する |
| あらゆる場所で再利用するロゴ | SVG | 再書き出しなしに、1ファイルで名刺から展示会バナーまで拡大可能 |
| 写真 | PNGまたはJPG | ベクターは写真の連続階調の細部を再現できない |
| スクリーンショット、アプリのモックアップ | PNG | ピクセルを正確に保持し、必要な透明部分も使える |
| Cricut、Silhouette、ビニールカッター | 事前定義したカットパスには通常SVG | 対応ソフトの手順ではラスターのアップロードも変換可能 |
| 昇華転写、DTG、プリントシャツ | 印刷かカットかによる。下記参照 | |
| QRコード | SVG | どの印刷サイズでも鮮明で読み取りやすい |
| 名刺や看板などの印刷 | ロゴ・グラフィックはSVG、写真はPNG/JPG | 線画はベクターで鮮明に、写真は高解像度ラスターで良好に印刷 |
カットの行には例外があります。CricutのPrint Then CutはPNGから使えます。最初にデザインを印刷し、周囲をカットするためです。Cricutの現在のアップロードガイドも、レイヤー付きSVGの読み込みに加え、基本のラスターアップロードとAccess限定のConvert to Layersを説明しています。
昇華転写やプリントシャツは迷いやすい用途です。 適切なファイルは制作業者によります。たとえばPrintfulの現在の印刷ファイル案内は、DTGにはPNGを推奨し、商品ごとの解像度を示しています。熱転写ビニールの手順にはカットパスが必要で、SVGが役立つ元データになります。受け付ける形式、ピクセル寸法、カラープロファイル、透明部分の要件を業者に確認してください。
ロゴの周囲に白い四角が出続ける場合は、形式の優劣ではなく透明部分の問題です。PNGやSVGが必要なのに、透明な背景を保存できないJPGで保存しています。
アイコン、トークン、イラスト付きボードには、ボードゲームの部品ごとにベクターかラスターかを選びます。フラットな資源シンボルに編集可能なパスが必要なら、ボードゲーム作品の変換ツールで1つ試し、セット全体を変換する前に部品レイアウトで確認してください。
PNGをSVGに変えられるか
PNGをSVGに変えられますか？ はい。ただしその形式で保存するのではなく、トレースします。ソフトがピクセル画像をベクターパスとして描き直します。逆のSVGからPNGは、固定サイズのピクセルに図形を平坦化するだけなので、簡単で安定しています。難しいのはPNGからSVGであり、トレース品質がすべてです。現代のウェブで見かける3つ目のラスター形式、WebPから始める場合も同じです。
難しい変換では結果が大きく分かれます。良いトレースは作品をきれいで編集可能なパスに再構築します。慎重でないものは、何千もの不要なアンカー、ぎざぎざの輪郭、分離できない色を作ります。同じ入力でも、出力はまったく違います。全体の手順は、品質を落とさずPNGをSVGに変換する方法をご覧ください。
知っておきたい落とし穴： トレースをまったくしない変換ツールもあります。元のPNGを.svgファイルに包んで返すだけです。拡張子は正しく、開くこともできますが、ピクセルのままです。拡大するとぼやけ、図形を1つも編集できません。それが偽ベクターであり、変換する目的を失わせます。ロゴのベクター化でも同じ落とし穴があります。
3つの簡単な確認で、本物のSVGか判断できます。
- 拡大します。 本物のベクターは鮮明です。偽物は、実体がPNGのままなのでピクセルが見えます。
- 図形をクリックします。 1枚の平面画像ではなく、個別のパスを選んで動かせるはずです。
- 複雑さを確認します。 きれいな曲線は何千個ではなく少数のアンカーポイントを使います。肥大化したトレースは編集しにくく、カットも遅くなります。トレースのノードが多くなる理由をご覧ください。
先に明記すべき限界として、すべてのPNGをSVGにするべきではありません。 写真、写真のスクリーンショット、グラデーションの多いAIアートは、きれいにはトレースできません。ベクターは平らな図形を記述するため、連続階調の細部は色の塊に単純化されます。元画像がロゴ、アイコン、フラットなイラストなら適しています。写真ならPNGのまま残してください。
PerfectVectorでの例
PNGからSVGでは、再構築されたパスがそれらの確認を通るかが重要です。PerfectVectorは、適したフラットな作品を、編集可能なパスと色付き図形にするために設計されています。ダウンロード前に、シルエット、パレット、ノード配置をプレビューで比較できます。PNGをSVGに変換し、無料で結果を確認して、完成ファイルが次のツールに合う場合にだけ1クレジットを使ってください。
PNGのまま残すべき場合
SVGが常に改善になるわけではありません。次の場合はPNGを残します。
- 写真、または写真の細部とグラデーションを持つ画像。
- ウェブやメール用の手軽な画像が必要なだけで、すでに適切なサイズである場合。
- どこでも問題なく開けることが必要な場合。PNGは広く共通して使えるラスター形式です。
形式の推奨記事が認める以上に、PNGが適切な場面は多くあります。目的は「常にSVG」ではなく、その仕事に合うファイルを使うことです。
ピクセルアートは興味深い境界例です。SVGにすると、各四角をベクターのタイルとして残すか、意図的にシルエットを滑らかにできます。ピクセルアートのベクター化ガイドでは、その複雑さを加える価値がある場面と、PNGをマスターにすべき場合を説明しています。
絵本では、すべての場面を変換せず、イラストの種類によってラスターとベクターのマスターを選びます。絵本イラストの変換ツールでフラットなキャラクターや装飾を1つ試し、描き込まれた場面は別のラスターマスターとして残してください。
よくある質問
SVGはPNGより優れていますか？ 全般的にどちらが優れているわけではなく、適した作業が違います。SVGはぼやけず拡大できるため、ロゴ、アイコン、文字、サイズ変更、大判印刷、カットに向きます。PNGは、SVGでは再現できない実際のピクセルの細部を保存するため、写真、スクリーンショット、細部の多い画像に向きます。
PNGをSVGにできますか？
はい。名前の変更ではなく、トレースします。変換ツールがピクセルをベクターパスとして描き直します。ロゴやアイコンなど、フラットでコントラストの高い作品には向きますが、写真には向きません。PNGを.svgで包んだだけでなく、編集可能なパスを持つ本物のベクターか必ず確認してください。
SVGの欠点は何ですか？ 写真や連続階調の細部は苦手で、一部の古いアプリやメールソフトは完全対応していません。不適切な変換では、不要なノードが数千個ある、編集しにくい肥大化したファイルになります。フラットなグラフィックでは、通常これらは大きな問題になりません。
CricutにはPNGとSVGのどちらが適していますか？ 事前に定義したレイヤー付きカットパスが必要ならSVGを使います。PNGはPrint Then Cutに適し、Cricutの基本画像変換手順でも使えます。Cricut Accessの契約者には、対応画像用のConvert to Layersがあります。印刷するピクセルが必要か、編集可能なカット形状が必要かで選んでください。
プリントシャツにはPNGとSVGのどちらを使うべきですか？ 業者と方式によります。DTG業者は適切なサイズのPNGを受け付けることが多く、熱転写ビニールではカットパスが必要でSVGをよく使います。共通の形式ルールに頼らず、業者が指定する形式、寸法、解像度、色、透明部分の要件を確認してください。
PNGとSVGはどちらが小さいですか？ ロゴやアイコンなどのフラットな作品では、通常SVGの方がずっと小さくなります。複雑な画像や写真のような画像では、すべての図形を記述するため、SVGの方がPNGより大きくなることがあります。作品に形式を合わせてください。
出典
- W3C：Portable Network Graphics (PNG) 仕様、第3版：PNGのラスター構造、可逆圧縮、透明部分、APNGアニメーションです。
- W3C：SVG 2：ベクター図形、パス、テキスト、スタイル、ベクターとラスターの混在を説明します。
- W3C：SVGの埋め込みコンテンツ：SVG内のラスター画像の埋め込みです。
- Cricut：Design Spaceに画像をアップロードする方法：PNG・基本画像とSVG・ベクターのアップロード動作です。
- Cricut：Print Then Cutの方法：印刷可能なラスターの手順とカットセンサーマークです。
- Printful：印刷ファイルの準備：業者ごとのラスター形式と解像度の案内です。
PNGしかないロゴやフラットなグラフィックがありますか？SVGパスにトレースし、上の3つの確認で、編集でき、使用先に合うファイルか確かめてください。
