画像を SVG に（ビットマップトレース）

機能

• カラートレースと白黒トレースの 2 方式
• 色数を調整可能（2〜64）：少ないほど簡潔、多いほど元に近い
• 3 段階の細かさ。適合許容差と小片の除去を同時に動かします
• トレースサイズを調整可能（長辺 400〜2000 px）。ファイルサイズと所要時間を決めます
• 最初に軽いぼかしをかけます（JPEG やスキャンのノイズが数千の小片としてトレースされるのを防ぐため）
• 透明部分は白で塗りつぶしてから処理 —— そうしないと透明部分が黒い塊としてトレースされます
• 出力は標準的な SVG で、Illustrator・Figma・Inkscape で編集できます
• 結果カードにパス数を表示します。元画像との差を最も直接に表す指標です
• 処理はすべてブラウザ内で完結し、画像は送信されません

使い方

1. 画像をドロップするか、クリックして選択
2. カラーか白黒かを選ぶ
3. まず 16 色で試し、騒がしければ下げ、足りなければ上げる
4. 生成して SVG をダウンロード

よくある質問

写真が色の塊の集まりになったのはなぜですか？

写真はベクター化に向かないからです。この手法は色の境界を見つけて多角形として描き直しますが、写真では隣り合うピクセルがわずかに異なる色をしています —— そのため数百の塊にまとまるか（貼り絵のように見えます）、数万のパスが残るか（元画像より大きいファイルになります）のどちらかです。判断は簡単で、色数を数えてください。アイコンやロゴ、線画は数十色以内で、きれいにトレースできます。写真は数万色で、上のような結果になります。写真を本格的にベクター化するには AI 系のモデルが必要で、それは別の種類のツールです。

色数はどのくらいが適切ですか？

16 から試してください。下げる（8、4）とポスター風になりファイルも小さくなります —— アイコンや線画に向きます。上げる（32、64）と元画像に近づきますが、パス数が急増しファイルも大きくなります。なお「細かさ」とは別のつまみです：色数は何色で表すか、細かさは境界をどれだけ精密に描き、どれだけ小さい小片を捨てるかを決めます。

トレースサイズとは何ですか？

トレース前に画像をどこまで縮小するか（長辺のピクセル数）で、所要時間とファイルサイズを直接決めます —— パス数はピクセル数に比例するからです。4000 px の画像を 2000 でトレースすると、800 の場合のおよそ 4 倍のパスになります。既定の 800 は多くのアイコンに十分で、細密な線画（楽譜や地図）は 1200 や 2000 に上げられますが、ファイルは明らかに大きくなります。拡大はしません：上限より小さい画像は元のサイズでトレースします。

透明な PNG の縁が白くなるのはなぜですか？

ツールはトレース前に透明部分を白で塗りつぶします。トレースアルゴリズムは RGB チャンネルしか見ず、透明なピクセルは `rgba(0,0,0,0)`、つまり「見えない黒」です。下地を敷かないと透明部分がすべて黒い塊としてトレースされ、明るい背景では黒い染みになります。白で下地を作ると透明は白（背景色）になり、見た目どおりになります。透明な SVG が欲しい場合は、書き出した後にベクター編集ソフトでその白い層を削除してください。

画像は送信されますか？

いいえ。デコード・トレース・生成はすべてブラウザのメモリ上で行われ、ページは一切リクエストを送りません。オフラインでも動作します。