PNGをSVGに変換

PNGはピクセルの格子で、SVGは図形を記述する形式なので、ぼやけることなくどんなサイズにも拡大でき、Illustrator、Inkscape、Figmaで編集できます。この変換ツールは、画像を色ごとに1つずつ、本物のベクターパスにトレースし、色数、ディテールの量、曲線のなめらかさを調整できます。処理はブラウザー内で行われ、何もアップロードされません。

使い方

1. PNG、JPG、WebP、AVIFの画像を選びます。ロゴ、アイコン、単純なイラスト、サインが最適です。
2. カラーモードと色数（8から始めるのがおすすめ）を選ぶか、線画なら白黒モードとしきい値を選びます。
3. ディテールの度合いと、曲線をなめらかにするかどうかを選びます。透明な結果が欲しい場合は「白い背景を無視する」にチェックを入れます。
4. 「変換」を押してプレビューを確認し、.svgファイルをダウンロードするか、コードをコピーします。

計算式

1. 最大1000pxに縮小。2. N色に減色（メディアンカット後にk-meansで調整）。3. 色のレイヤーごとにマーチングスクエアでトレース。4. Ramer–Douglas–Peuckerでアウトラインを簡略化（許容値 高/標準/低 = 0.6 / 1 / 1.6px）。5. 任意：Catmull-Rom曲線を3次ベジェにフィット。

レイヤーは色の面積が大きいものから小さいものへと重ねられ、各レイヤーは上のレイヤーの下まで広がるため、隣り合う色の間に髪の毛のような隙間はできません。座標は元のサイズに戻して保存されます。

計算例

1200 × 500pxのサインのスキャンを、白黒モード、しきい値128で変換すると、パス2個（黒いインクと白い紙）になり、1000 × 417pxでトレースされ、viewBoxは0 0 1200 500です。「白い背景を無視する」にチェックを入れると、インクだけのパス1個が、透明な背景の上に残ります。