> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# PNGとSVGの違い：用途に合う形式と変換すべき場面を解説

> PNGはピクセル、SVGは数学的な図形でできています。制作物に合わせた選び方と、PNGを本物のSVGに変換する方法を分かりやすく解説します。

Source: https://perfectvector.com/ja/blog/png-vs-svg

Language: ja
Author: Claire Yoon
Published: 2026-06-08T08:00:00+09:00
Updated: 2026-09-30T08:00:00+09:00

PNGとSVGは、同じものの高品質版と低品質版ではありません。異なる*種類*のファイルであり、どちらが適切かは制作物によります。**PNG**は、色付きの小さな四角でできたモザイクのようなピクセル画像です。**SVG**は数学でできています。線、曲線、図形を、コンピューターが指定サイズで毎回描きます。この違いから、ほかの性質も決まります。簡単な目安として、写真や細部の多い画像にはPNG、ロゴ、アイコン、文字、サイズを変えるもの、大きく印刷するもの、機械でカットするものにはSVGを使います。PNGのロゴをSVGにしたいなら、その形式で*保存*するのではなく、変換します。その工程の品質が結果を左右します。

> **要点**
>
> * **PNG**はピクセルです。写真、スクリーンショット、透明部分が必要な細部の多い画像に適しています。
> * **SVG**は数学的な情報です。ロゴ、アイコン、文字、サイズ変更、大判印刷、カットするものに適しています。
> * **拡大すると違いが分かります。** 両方を10倍にすると、PNGはぼやけ、SVGは鮮明なままです。
> * **PNGの名前を`.svg`に変えるだけでは変換できません。** 本物のSVGにするにはトレースが必要です。[PNGをSVGに変換し](https://perfectvector.com/ja/convert-png-to-svg)、結果を確認してください。
> * **偽SVGに注意してください。** PNGを`.svg`ファイルで包んでも、ピクセルは見えるままで、編集もできません。

## 実際の違い：ピクセルと数学的な情報

PNGを開いて大きく拡大すると、いずれ四角が見えます。ピクセルの固定格子だからです。元サイズを超えると、コンピューターが四角の間に何を入れるか推測するため、輪郭が柔らかく角ばります。ウェブサイトから取った小さなロゴが、拡大するとすぐぼやける理由です。

SVGは、パス、図形、テキスト、塗りなどのベクター指示を保存できます。そうした幾何学的な要素は、固定のピクセル格子を見せずに、異なるサイズで描き直せます。ただし[SVG 2仕様](https://www.w3.org/TR/SVG2/)は、ラスター画像の埋め込みやその他の効果も認めています。SVGが解像度に依存しないのは、関係する内容が本当にベクターである範囲に限ります。「ピクセルではなく指示」という考えが初めてなら、[画像のベクター化とは何か](https://perfectvector.com/ja/blog/what-is-image-vectorization)をご覧ください。

## PNGとSVGを一覧で比較

|              | PNG                                                                                                    | SVG                          |
| ------------ | ------------------------------------------------------------------------------------------------------ | ---------------------------- |
| 構成           | ピクセル（ラスター）                                                                                             | 数学的な情報（ベクター）                 |
| ぼやけずに拡大できるか  | できない。解像度は固定                                                                                            | できる。どのサイズにも対応                |
| 図形の編集        | 不可。1枚の平面画像                                                                                             | 可能。独立したパスと色                  |
| 透明部分         | 対応                                                                                                     | 対応                           |
| アニメーション      | APNGで対応。編集可能な静止画1枚を取り出すには、[APNGからSVGへの変換ツール](https://perfectvector.com/ja/convert-apng-to-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から使えます](https://perfectvector.com/ja/blog/print-then-cut-svg-or-png)。最初にデザインを印刷し、周囲をカットするためです。Cricutの[現在のアップロードガイド](https://help.cricut.com/hc/en-us/articles/360009556313-How-to-upload-images-into-Design-Space)も、レイヤー付きSVGの読み込みに加え、基本のラスターアップロードとAccess限定のConvert to Layersを説明しています。

**昇華転写やプリントシャツは迷いやすい用途です。** 適切なファイルは制作業者によります。たとえばPrintfulの[現在の印刷ファイル案内](https://help.printful.com/hc/en-us/articles/28491464259740-How-should-I-prepare-my-print-file-for-the-best-results)は、DTGにはPNGを推奨し、商品ごとの解像度を示しています。熱転写ビニールの手順にはカットパスが必要で、SVGが役立つ元データになります。受け付ける形式、ピクセル寸法、カラープロファイル、透明部分の要件を業者に確認してください。

ロゴの周囲に**白い四角**が出続ける場合は、形式の優劣ではなく透明部分の問題です。PNGやSVGが必要なのに、透明な背景を保存できないJPGで保存しています。

アイコン、トークン、イラスト付きボードには、[ボードゲームの部品ごとにベクターかラスターかを選びます](https://perfectvector.com/ja/blog/vector-or-raster-board-game-art)。フラットな資源シンボルに編集可能なパスが必要なら、[ボードゲーム作品の変換ツール](https://perfectvector.com/ja/board-game-artwork-to-svg)で1つ試し、セット全体を変換する前に部品レイアウトで確認してください。

## PNGをSVGに変えられるか

**PNGをSVGに変えられますか？** はい。ただしその形式で*保存*するのではなく、**トレース**します。ソフトがピクセル画像をベクターパスとして描き直します。逆のSVGからPNGは、固定サイズのピクセルに図形を平坦化するだけなので、簡単で安定しています。難しいのはPNGからSVGであり、トレース品質がすべてです。現代のウェブで見かける3つ目のラスター形式、[WebPから始める場合](https://perfectvector.com/ja/blog/how-to-convert-webp-to-svg)も同じです。

難しい変換では結果が大きく分かれます。良いトレースは作品をきれいで編集可能なパスに再構築します。慎重でないものは、何千もの不要なアンカー、ぎざぎざの輪郭、分離できない色を作ります。同じ入力でも、出力はまったく違います。全体の手順は、[品質を落とさずPNGをSVGに変換する方法](https://perfectvector.com/ja/blog/png-to-svg-without-losing-quality)をご覧ください。

**知っておきたい落とし穴：** トレースをまったくしない変換ツールもあります。元のPNGを`.svg`ファイルに包んで返すだけです。拡張子は正しく、開くこともできますが、ピクセルのままです。拡大するとぼやけ、図形を1つも編集できません。それが**偽ベクター**であり、変換する目的を失わせます。[ロゴのベクター化](https://perfectvector.com/ja/blog/how-to-vectorize-a-logo)でも同じ落とし穴があります。

3つの簡単な確認で、本物のSVGか判断できます。

* **拡大します。** 本物のベクターは鮮明です。偽物は、実体がPNGのままなのでピクセルが見えます。
* **図形をクリックします。** 1枚の平面画像ではなく、個別のパスを選んで動かせるはずです。
* **複雑さを確認します。** きれいな曲線は何千個ではなく少数のアンカーポイントを使います。肥大化したトレースは編集しにくく、カットも遅くなります。[トレースのノードが多くなる理由](https://perfectvector.com/ja/blog/svg-too-many-nodes)をご覧ください。

先に明記すべき限界として、**すべてのPNGをSVGにするべきではありません。** 写真、写真のスクリーンショット、グラデーションの多いAIアートは、きれいにはトレースできません。ベクターは平らな図形を記述するため、連続階調の細部は色の塊に単純化されます。元画像がロゴ、アイコン、フラットなイラストなら適しています。写真ならPNGのまま残してください。

## PerfectVectorでの例

PNGからSVGでは、再構築されたパスがそれらの確認を通るかが重要です。[PerfectVector](https://perfectvector.com/ja/image-to-vector)は、適したフラットな作品を、編集可能なパスと色付き図形にするために設計されています。ダウンロード前に、シルエット、パレット、ノード配置をプレビューで比較できます。[PNGをSVGに変換し](https://perfectvector.com/ja/convert-png-to-svg)、無料で結果を確認して、完成ファイルが次のツールに合う場合にだけ1クレジットを使ってください。

**PNGを拡大**

![輪郭が明らかにぼやけてピクセルが見えるまで拡大したPNGロゴ](https://perfectvector.com/blog/png-vs-svg/png-enlarged.webp)

*ラスターのPNGでは、輪郭が柔らかく四角いピクセルに分かれます。*

**SVGを拡大**

![同じロゴを同じサイズに拡大したSVG。ベクターの輪郭は滑らかです](https://perfectvector.com/blog/png-vs-svg/svg-enlarged.webp)

*トレースしたSVGは、同じサイズでも鮮明です。*

## PNGのまま残すべき場合

SVGが常に改善になるわけではありません。次の場合はPNGを残します。

* **写真**、または写真の細部とグラデーションを持つ画像。
* **ウェブやメール用の手軽な画像**が必要なだけで、すでに適切なサイズである場合。
* **どこでも問題なく開けること**が必要な場合。PNGは広く共通して使えるラスター形式です。

形式の推奨記事が認める以上に、PNGが適切な場面は多くあります。目的は「常にSVG」ではなく、その仕事に合うファイルを使うことです。

ピクセルアートは興味深い境界例です。SVGにすると、各四角をベクターのタイルとして残すか、意図的にシルエットを滑らかにできます。[ピクセルアートのベクター化ガイド](https://perfectvector.com/ja/blog/pixel-art-to-vector)では、その複雑さを加える価値がある場面と、PNGをマスターにすべき場合を説明しています。

絵本では、すべての場面を変換せず、[イラストの種類によってラスターとベクターのマスターを選びます](https://perfectvector.com/ja/blog/vector-or-raster-childrens-book-illustrations)。[絵本イラストの変換ツール](https://perfectvector.com/ja/childrens-book-illustration-to-vector)でフラットなキャラクターや装飾を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より大きくなることがあります。作品に形式を合わせてください。

## 出典

1. [W3C：Portable Network Graphics (PNG) 仕様、第3版](https://www.w3.org/TR/png-3/)：PNGのラスター構造、可逆圧縮、透明部分、APNGアニメーションです。
2. [W3C：SVG 2](https://www.w3.org/TR/SVG2/)：ベクター図形、パス、テキスト、スタイル、ベクターとラスターの混在を説明します。
3. [W3C：SVGの埋め込みコンテンツ](https://www.w3.org/TR/SVG2/embedded.html)：SVG内のラスター画像の埋め込みです。
4. [Cricut：Design Spaceに画像をアップロードする方法](https://help.cricut.com/hc/en-us/articles/360009556313-How-to-upload-images-into-Design-Space)：PNG・基本画像とSVG・ベクターのアップロード動作です。
5. [Cricut：Print Then Cutの方法](https://help.cricut.com/hc/en-us/articles/360009387274-How-to-Print-Then-Cut-in-Design-Space)：印刷可能なラスターの手順とカットセンサーマークです。
6. [Printful：印刷ファイルの準備](https://help.printful.com/hc/en-us/articles/28491464259740-How-should-I-prepare-my-print-file-for-the-best-results)：業者ごとのラスター形式と解像度の案内です。

***

PNGしかないロゴやフラットなグラフィックがありますか？[SVGパスにトレースし](https://perfectvector.com/ja/image-to-vector)、上の3つの確認で、編集でき、使用先に合うファイルか確かめてください。

## Explore

- [Read the HTML article](https://perfectvector.com/ja/blog/png-vs-svg)
- [PDFをSVGに変換する方法：書き出しとトレースの使い分け](https://perfectvector.com/ja/blog/convert-pdf-to-svg.md)
- [輪郭の品質を保ちながらJPGをSVGに変換する方法と注意点](https://perfectvector.com/ja/blog/how-to-convert-jpg-to-svg.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)