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
PNG、JPG、WebP などの対応画像をドロップするか、ファイルを選択をクリックします。
2
ベクター化プリセットまたはカラーモードを選び、結果を確認して詳細度を調整します。
3
変換した SVG をダウンロードするか、準備ができた複数のファイルを ZIP にまとめてダウンロードします。

プライバシー：ファイルはブラウザから出ません

変換は、JavaScript および WebAssembly を使用してブラウザーでローカルに実行されます。ファイルのアップロードやサーバー側の変換がないため、追加したファイルはデバイス上に残ります。

ローカル処理は、機密ロゴ、内部文書、未公開のクライアントアートワークを保護するのに役立ちます。ページと変換コードは使用中にキャッシュされるため、すでに開いているツールはネットワーク接続がなくても引き続き動作できます。

よくある質問

PNG をベクター化すると透過は保たれますか？

SVG 出力では透明な領域をクリアなままにすることができるため、PNG は単色の背景のないロゴやアイコンのソースとして役立ちます。トレースはまだ近似値であるため、プレビューで柔らかいエッジまたは半透明のエッジを検査してください。

どんな PNG がベクター化に向いていますか？

平坦な色、鮮明な輪郭、色数の少ない PNG（ロゴ、アイコン、線画、ステッカー）は小さくきれいな SVG になります。細かい写真も処理できますが、ファイルは大きくなります。その場合はノイズ除去を強め、色の精度を下げると SVG を扱いやすく保てます。

カラーモードと白黒のどちらを使うべきですか？

ロゴ、イラスト、複数の塗りがあるものにはカラーを選んでください。線画、スキャンした図、署名など、きれいな単色のシルエットにしたいものには白黒を選んでください。白黒のしきい値のスライダーで、黒と白の境目を調整できます。