PNG を SVG に
PNG を SVG に変換：ラスター画像をベクター化
PNG のロゴ、アイコン、線画を、透過を保ったまま解像度に依存しない SVG パスに変換します。平坦な色と輪郭のはっきりした画像に最適です。写真調の PNG ではノイズ除去を強めてください。
新規ファイルの既定値を編集しています
プレビュー
PNG とは
PNG（Portable Network Graphics）は、アルファチャンネルによる完全な透過に対応した可逆圧縮のラスター画像形式です。透過 PNG はアイコン、スクリーンショット、イラストなど、輪郭のくっきりした画像や透明な背景が必要な画像に最適です。
SVG とは
SVG（Scalable Vector Graphics）は XML をもとにしたベクター画像形式です。ピクセルではなく、図形、パス、塗り、線を数式で表すため、どんなサイズで描画しても品質が落ちません。
SVG は Web における標準のベクター形式です。最新のブラウザはすべて標準で対応し、CSS でスタイルを指定でき、JavaScript や SMIL でアニメーションもできます。同等のラスター画像に比べてファイルサイズも大幅に小さくなります。
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：ファイルサイズと品質のバランス
ファイルサイズ
単純な PNG のロゴ（32×32 から 512×512）は 5〜30 KB が一般的で、ベクター化すると 2〜15 KB の SVG になり、どんなサイズにも拡大できます。写真調の PNG（4000×3000 で 4〜8 MB）は、およそ 50〜300 KB の SVG になります。元より小さくなりますが、細部はならされます。PNG に平坦な色が多いほど効果は大きくなります。
SVG が元の PNG に勝るとき
素材を複数のサイズで表示する必要があるとき（ファビコン、Retina 対応アイコン、印刷品質のロゴ）や、色替えやアニメーションをしたいときは SVG を使ってください。SVG はテキストとして編集できるため、デザインシステムに渡すのもベクター形式です。
元の PNG を使い続けるべきとき
写真、スクリーンショット、アンチエイリアスのかかった UI のキャプチャは PNG のままにしてください。ピクセル単位で正確な内容をベクター化すると、元の PNG よりずっと大きな SVG になり、トレーサーはノイズ、細かなグラデーション、繊細なアンチエイリアスを粗い色領域にまとめてしまいます。
品質とのバランス
PNG は可逆で、すべてのピクセルが描いたとおりです。ベクター化は近似で、トレーサーは色領域に曲線を当てはめるため、非常に細い線、写真のグラデーション、ディザ模様はならされたり階段状になったりします。ロゴ、アイコン、線画なら見た目はほぼ同じですが、写真ではポスター調の仕上がりになります。
PNG を SVG にオンラインで変換する方法
- ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
- 出力設定（サイズ、DPI、背景、品質、トレースの細かさ）を指定すると、プレビューがその場で更新されます。
- 「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。
プライバシー：ファイルはブラウザから出ません
ファイルが端末の外に出ることはありません。変換は JavaScript と WebAssembly を使ってすべてブラウザ内で実行されます。アップロードもサーバー処理もないため、ファイルに関する情報がどこかへ送られることはありません。
何もアップロードされないため、社外秘のロゴ、社内文書、未公開の顧客作品にも安心して使えます。使用中に端末へキャッシュされるので、初回訪問のあとはネットワーク接続がなくても動作します。
よくある質問
PNG をベクター化すると透過は保たれますか？
はい。PNG の透過はトレース中も保たれます。元画像の透明な部分は SVG の出力でも透明のままなので、ベクターのロゴやアイコンはどんな背景の上にもきれいに重なります。
どんな PNG がベクター化に向いていますか？
平坦な色、鮮明な輪郭、色数の少ない PNG（ロゴ、アイコン、線画、ステッカー）は小さくきれいな SVG になります。細かい写真も処理できますが、ファイルは大きくなります。その場合はノイズ除去を強め、色の精度を下げると SVG を扱いやすく保てます。
カラーモードと白黒のどちらを使うべきですか？
ロゴ、イラスト、複数の塗りがあるものにはカラーを選んでください。線画、スキャンした図、署名など、きれいな単色のシルエットにしたいものには白黒を選んでください。白黒のしきい値のスライダーで、黒と白の境目を調整できます。