ドット絵 SVG 変換ツール | ブラウザー内でローカル処理

使い方

1. 画像をドロップ

   PNG、WebP、BMP、GIF、JPEG をアップロード領域にドラッグするか、クリックして選択するか、サンプルを選びます。最大 1024 × 1024 ピクセルまで対応し、縮小されることはありません。

2. 出力を調整

   背景色の除去、同じ色のピクセルの複合パスへの結合、ポスタリゼーションによる減色、半透明の保持や除去、空白の余白のトリミングができます。プレビューはすぐに更新されます。

3. 比較してダウンロード

   元画像と SVG を並べて確認し、拡大して、図形にカーソルを合わせると正確な色がわかります。最後に SVG をダウンロードします。

特長

• 1 ピクセル = SVG の 1 単位

  幅・高さ・viewBox は元画像と同じです。形状はすべて整数座標で、水平と垂直の辺だけで構成されます。曲線、線、近似、埋め込みラスターは一切使いません。

• 複合パスに結合

  同じ色のピクセルは色ごとに 1 つの複合パスとしてトレースされ、穴は even-odd 塗りルールで保たれます。ベタ塗りの多いイラストは、たいていファイルが大幅に小さくなります。

• ポスタリゼーション

  重み付きメディアンカット法で、元のすべての色から 2 色まで減色します。ディザリングは行わず、ピクセルの位置も一切変えません。

• 透明度

  完全に透明なピクセルは出力されません。半透明は fill-opacity になり、完全に不透明にすることもできます。

• 透明な余白のトリミング

  外側の空白の行と列を任意で切り取ります。絵の内側の穴や薄いピクセルはそのまま残ります。

• プライバシー重視

  変換はブラウザー内の Web Worker で実行されます。画像がサーバーにアップロードされることはありません。

なぜ「画像トレース」や「ビットマップのトレース」ではいけないのか

Illustrator の画像トレース、Inkscape のビットマップのトレース、potrace などの汎用ベクター化ツールは、写真やスキャンした絵のために作られています。各色の領域の輪郭に滑らかな曲線を当てはめるため、ドット絵のくっきりした角は丸い塊になり、1 ピクセルの線は揺れたり消えたりし、隣り合う色が混ざってしまいます。

Pixel to SVG は曲線の当てはめを一切行いません。整数グリッド上で色の異なるピクセル同士の境界を正確にたどるので、SVG は画像のロスレスなコピーになります。どれだけ拡大しても、すべてのピクセルが正方形のまま、くっきり表示されます。

よくある質問