PNG を SVG に
オンラインベクタライザーを使用して PNG を SVG に変換する
PNG のロゴ、アイコン、イラスト、線画をスケーラブルな SVG パスにトレースします。透明な領域は鮮明なままであり、詳細とノイズ低減を調整する前にフルカラーまたは白黒のトレースを選択できます。
新規ファイルの既定値を編集しています
プレビュー
プレビューはありません。ファイルを追加して選択すると結果が表示されます。
ファイルがありません。上にドロップするか、「ファイルを選択」を押してください。
PNG とは
PNG（Portable Network Graphics）は、アルファチャンネルによる完全な透過に対応した可逆圧縮のラスター画像形式です。透過 PNG はアイコン、スクリーンショット、イラストなど、輪郭のくっきりした画像や透明な背景が必要な画像に最適です。
SVG とは
SVG（Scalable Vector Graphics）は XML をもとにしたベクター画像形式です。ピクセルではなく、図形、パス、塗り、線を数式で表すため、どんなサイズで描画しても品質が落ちません。
SVGはWeb標準のベクター形式です。すべての最新ブラウザでネイティブに表示でき、CSSでの装飾やJavaScript、SMILによるアニメーションにも対応します。ロゴ、アイコン、イラストでは軽量になりやすい一方、複雑なSVGはファイルサイズが大きくなる場合があります。
SVG とラスター形式の比較
ベクター画像（SVG）とラスター画像（PNG、JPG）は用途が異なります。画像を何に使うかによって適した形式が決まります。
| 項目 | SVG | PNG / JPG | ICO / ICNS |
|---|---|---|---|
| 拡大縮小 | 解像度に依存しない | 拡大するとぼやける | 固定サイズで事前に描画 |
| ファイルサイズ | 図形やアイコンは小さい | 解像度とともに増える | 各サイズの画像の集合 |
| 編集 | テキストやベクターツールで編集可 | ピクセル単位の編集のみ | 各サイズを編集して再度まとめる |
| アニメーション | CSS、SMIL、JavaScript | 限定的（APNG / GIF） | 非対応 |
| 透過 | 対応 | PNG は対応、JPG は非対応 | 対応（PNG ベース） |
PNG を SVG に変換するのはどんなとき
ロゴ、アイコン、イラストをどんなサイズでもきれいに拡大したいときは、PNG を SVG に変換してください。PNG をベクター化すると、印刷解像度でも高 DPI ディスプレイでもくっきりした出力が得られ、色替えやサイズ変更、アニメーションができる編集可能なファイルになります。平坦な色とはっきりした輪郭の PNG で最も良い結果になります。複雑な写真もトレースできますが、SVG は大きくなります。
PNG から SVG：ファイルサイズと品質のバランス
ファイルサイズ
SVGのファイルサイズは、PNGのピクセル寸法だけでなく、パスの数と複雑さにも依存します。フラットなロゴやアイコンはコンパクトな SVG になることがよくありますが、写真では何千もの形状やソースよりも大きなファイルが生成されることがあります。通常、色が少なく、ノイズ リダクションが強化され、パスが単純になると、出力サイズが小さくなります。
SVG が元の PNG に勝るとき
素材を複数のサイズで表示する必要があるとき（ファビコン、Retina 対応アイコン、印刷品質のロゴ）や、色替えやアニメーションをしたいときは SVG を使ってください。SVG はテキストとして編集できるため、デザインシステムに渡すのもベクター形式です。
元の PNG を使い続けるべきとき
写真、スクリーンショット、アンチエイリアスのかかった UI のキャプチャは PNG のままにしてください。ピクセル単位で正確な内容をベクター化すると、元の PNG よりずっと大きな SVG になり、トレーサーはノイズ、細かなグラデーション、繊細なアンチエイリアスを粗い色領域にまとめてしまいます。
品質とのバランス
PNG はロスレスです。すべてのピクセルがペイントされたものとまったく同じです。ベクトル化は近似的です。トレーサーは曲線をカラー領域に適合させるため、非常に細いストローク、写真のグラデーション、およびディザリングされたパターンを滑らかにしたり単純化したりできます。ロゴ、アイコン、線画は通常、厳密にトレースされます。写真はより様式化された、またはポスター化されたように見える傾向があります。
PNG を SVG にオンラインで変換する方法
- 1
ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
- 2
出力設定（サイズ、DPI、背景、品質、トレースの細かさ）を指定すると、プレビューがその場で更新されます。
- 3
「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。
プライバシー：ファイルはブラウザから出ません
変換は、JavaScript および WebAssembly を使用してブラウザーでローカルに実行されます。ファイルのアップロードやサーバー側の変換がないため、追加したファイルはデバイス上に残ります。
ローカル処理は、機密ロゴ、内部文書、未公開のクライアント アートワークを保護するのに役立ちます。ページと変換コードは使用中にキャッシュされるため、すでに開いているツールはネットワーク接続がなくても引き続き動作できます。
よくある質問
PNG をベクター化すると透過は保たれますか？
SVG 出力では透明な領域をクリアなままにすることができるため、PNG は単色の背景のないロゴやアイコンのソースとして役立ちます。トレースはまだ近似値であるため、プレビューで柔らかいエッジまたは半透明のエッジを検査してください。
どんな PNG がベクター化に向いていますか？
平坦な色、鮮明な輪郭、色数の少ない PNG（ロゴ、アイコン、線画、ステッカー）は小さくきれいな SVG になります。細かい写真も処理できますが、ファイルは大きくなります。その場合はノイズ除去を強め、色の精度を下げると SVG を扱いやすく保てます。
カラーモードと白黒のどちらを使うべきですか？
ロゴ、イラスト、複数の塗りがあるものにはカラーを選んでください。線画、スキャンした図、署名など、きれいな単色のシルエットにしたいものには白黒を選んでください。白黒のしきい値のスライダーで、黒と白の境目を調整できます。