PNGをSVGに変換（画像のベクター化）

PNGやJPGを、色数とディテールを選んで、拡大縮小できるSVGの図形に変換します。トレースはブラウザー内で実行され、画像がお使いの端末の外に出ることはありません。

画像は、お使いの端末上で、このタブのバックグラウンドでデコードされてトレースされ、アップロードされることはありません。SVGもここで作られ、ダウンロードまたはコピーするまで、どこにも送られません。

SVG オプティマイザーでファイルを軽くする

PNGをSVGに変換 について

PNGをSVGに変換するこのツールは、ビットマップ画像を、拡大縮小できるベクター図形に変えます。画像を選んだ数の色に減らし、各色の領域がどこから始まりどこで終わるかを見つけて、それぞれの領域をなめらかなパスで描き直すので、ロゴやアイコンはどんなサイズでも鮮明なままです。ロゴ・アイコン・イラスト・写真・白黒の線画向けのプリセットが妥当な初期値を設定し、スライダーで色数・ディテール・小さな点の除去・ぼかしを調整できます。隣り合う2色のあいだで混ざっただけのピクセルは、そのどちらかの領域に含まれるので、単色のロゴは、元の色そのままで仕上がります。透明な部分は透明のまま残すことができ、大きな画像は縮小してトレースされますが、SVGは元の寸法を保ちます。すべての処理はお使いの端末上で行われます。

機能

  • ロゴ・アイコン・イラスト・写真・白黒の線画向けのプリセット。どれも調整できる出発点
  • 2〜64色を、ピクセル自体から選び出すので、単色のロゴは元の色そのままに保たれる
  • 粗くなめらかな状態から細かく正確な状態まで動かせる「Detail」スライダーと、ノイズの多い画像やJPGの元画像向けの、小さな点の除去とぼかし
  • 透明な部分は透明のまま残せ、希望すれば白で塗りつぶすこともできる
  • 輪郭を確認するための、ドラッグできる変換前後の分割線（200％・400％ズーム対応）と、並べて表示するビュー
  • トレースはバックグラウンドで実行され、経過時間が表示される。設定を変えると、実行中のトレースは取り消される
  • SVGは元のサイズと一致するviewBoxを保ち、×1または×2で開ける
  • パスの数・ファイルサイズ・使用した色の表示、1 MBを超えたときの警告、SVGコードのダウンロードまたはコピー

PNGをSVGに変換 の使い方

  1. PNG・JPG・WebP・GIF・BMPをドロップするか、クリップボードから画像を貼り付けます
  2. 画像に最も近いプリセットを選び、色数・ディテール・小さな点の除去・ぼかしを調整します
  3. プレビュー上で分割線をドラッグし、拡大して、輪郭と細部を確認します
  4. .svgファイルをダウンロードするか、SVGコードをコピーします

例

入力

logo.png — 640 × 640 px, 41 KB
Preset: Logo / flat colours (6 colours, detail 60%, remove specks 8 px)

出力

logo.svg — 640 × 640 px
6 colours · 14 paths · 8.2 KB
Traced in 0.4 s

単色のロゴは、ほんの数個の図形になり、同じファイルが、ファビコンとして表示されても、看板に使われても鮮明なままです。

よくあるエラーとトラブルシューティング

  • 図形の輪郭がでこぼこしたり、角が丸くなったりします。 — トレースした輪郭のきれいさは、元になるピクセル次第です。手元にある最も大きな画像を使い、「Detail」を60％から80％の間で試してください。低いほどなめらかになり、高いほどピクセルの段差をすべてたどります。
  • SVGが数メガバイトにもなり、開くのが遅くなります。 — 写真や色数の多い画像では、数千もの小さな図形が必要になります。「Colours」を下げ、「Detail」を「Coarse」側に寄せ、「Remove specks」を15 px以上に上げるか、少しだけ「Blur」を加えてください。
  • 隣り合う図形のあいだに、細い線が見えます。 — 「Outline shapes」をオンにします。各図形の縁をその図形自身の色で描く機能で、「Black & white」を除くすべてのプリセットでオンになっています。
  • 透明だった背景が、白になりました。 — 「Keep transparent areas」のスイッチは、画像に透明部分があるときにだけ表示されます。オンになっていることを確認してください。JPGには残すべき透明部分がないため、背景は1つの色としてトレースされます。

よくある質問

PNGをSVGに変換するこのツールは、画像をそのまま変換せずに、描き直すのはなぜですか？
PNGは色の付いたピクセルの格子を、SVGは図形と曲線を保存する形式なので、一方をもう一方に損失なく変える方法はありません。このツールは、各色の領域がどこから始まりどこで終わるかを求めて、その領域ごとに図形を描きます。輪郭はなめらかな曲線になり、細かな質感は単純化され、グラデーションは単色の帯になります。そのため、ロゴや線画はきれいにトレースでき、写真は様式化された見た目になります。
PNGをSVGに変換するツールで、ロゴから最もきれいなSVGを作るには、どうすればよいですか？
ロゴの最も大きく、最もコントラストの高いバージョンから始めて、「Logo」プリセットを選びます。「Colours」は、ロゴが実際に持っている単色の数に設定してください。このツールは、画像に含まれる以上の色を使うことはありません。迷い込んだピクセルを取り込むため、「Remove specks」は8 px以上に保ち、元がJPGなら少しだけ「Blur」を加え、ダウンロードする前に400％ズームで輪郭を確認します。
PNGをSVGに変換するツールの「Colours」と「Detail」のスライダーは、それぞれ何をしますか？
「Colours」は、SVGで使える色の最大数で、2〜64の範囲です。「Detail」は、曲線がピクセルの縁にどこまで忠実に沿うかを決めます。「Coarse」側にすると、輪郭の数が減ってなめらかになり、やや緩くなります。「Fine」側にすると、すべての段差に沿うので、ファイルが大きくなります。「Remove specks」は、輪郭が短い図形を隣の図形に統合し、「Blur」は、色を選ぶ前にノイズをなめらかにします。
PNGをSVGに変換するツールで、写真をベクター化できますか？
できますが、結果は、単色の図形でできたポスタリゼーション風の様式化された写真になり、数千もの図形が必要になるため、ファイルも大きくなります。「Detailed photo」プリセットが、最も忠実な出発点です。ファイルを小さくしたいときは、色数を下げるか「Remove specks」を上げてください。写真として見られれば十分なときは、JPGやWebPのままにしておくのがおすすめです。
PNGをSVGに変換するツールでトレースするとき、画像はアップロードされますか？
いいえ。画像はお使いの端末上でデコードされてトレースされ、ピクセルもSVGもどこにも送信されません。大きな画像は、数秒で終わるように、トレース時に長辺が1200ピクセルまで縮小されますが、SVGは元のサイズを保ちます。
PNGをSVGに変換するツールで作ったSVGを、Figma・Inkscape・Illustratorで開いて編集するには、どうすればよいですか？
.svgをダウンロードして、アプリにドラッグするか、アプリの「開く」や「読み込み」のコマンドを使います。どの図形も、色が直接指定された塗りつぶしのパスなので、色の変更、移動、結合、削除ができます。最も大きな色の領域は、下に敷かれた1つの図形になっていて、それを削除すると背景が透明になります。「Copy SVG code」を使うと、同じマークアップをHTMLやコードエディターに貼り付けられます。

関連ツール

  • SVG から PNG への変換 — SVG マークアップや .svg ファイルを、任意のスケールで鮮明な PNG や JPG に変換できます。
  • SVG オプティマイザー — SVGを圧縮: コメント、メタデータ、エディタの残骸を削除し、空白をまとめます。
  • 画像フォーマット変換 — 画像を PNG、JPEG、WebP 間でブラウザ内ですべて変換します。
  • 画像リサイズ — ピクセル数・割合・プリセット・長辺のいずれかで写真をリサイズし、複数枚をまとめてZIPでダウンロードできます。
  • ファビコン作成 — 画像・文字・絵文字から、favicon.ico・各サイズのPNG・Appleタッチアイコン・Webマニフェストを作成します。
  • 画像カラーピッカー — 画像をホバー・クリックして、任意のピクセルの HEX・RGB・HSL を取得できます。
  • SVGをPDFに変換 — SVGの図版をPDFに変換し、できるかぎり図形をベクターのまま残します。
  • Base64 画像エンコーダー / デコーダー — 画像を HTML・CSS スニペット付きの Base64 Data URI に変換し、Data URI をダウンロード可能な画像にデコードします。

画像の他のツール

画像のツールをすべて見る (37) · すべてのツール