はじめに
手持ちの画像（PNG / JPG など）を、ブラウザだけで SVG（ベクター）に変換できる無料ツールを作りました。インストールも登録も不要で、画像は外部に送信されません（全部クライアント側で処理します）。
- 使う場所 👉 https://tdmo.org/lab/img2svg
- 単一のHTMLファイルで完結。フレームワークもビルドも無し。
ロゴ・アイコン・線画をきれいにSVG化するのが得意です。この記事では、どういう工夫が入っているかを気軽に紹介します。
作ったきっかけ
「このロゴ、SVGにしたいな」という場面はよくあります。ただ、既存の変換にありがちな悩みがいくつかありました。
- 4色しかないロゴなのに、変換すると中間色だらけになる
- 透過PNGの背景が、変な色でベタ塗りされてしまう
- 曲線が、拡大するとカクカク（ガビガビ）になる
このあたりを「ブラウザだけ」で気持ちよく解決したかった、というのが動機です。
使い方
- 画像をドラッグ＆ドロップ
- （必要なら）残したい色をスポイトで選ぶ
- 「SVGに変換」を押す → ダウンロード
これだけです。
仕組みメモ
2つの変換エンジンを切り替え
- potrace（既定）：輪郭をなめらかなベジェ曲線に最適化するので、拡大してもガビガビになりません。potrace自体は単色トレーサーなので、後述のパレットを使って「色ごとに白黒マスクを作ってトレース → 色を付けて重ねる」色別方式（Inkscapeの Trace Bitmap と同じ考え方）で多色に対応しました。
- ImageTracer.js：速くて多色をそのまま扱えるので、写真寄りやスピード重視のとき用。
なめらか優先ONのときは、作業画像を高解像度化＋各色マスクに軽いぼかしをかけてから二値化しています。二値化の輪郭そのものが滑らかになるので、仕上がりのガタつきが減ります。
色をねらいどおりに残す（パレット固定）
変換で中間色が増える主因は、輪郭のアンチエイリアス（にじみ）に色数を奪われることです。そこで「パレット固定」を用意し、使う色を明示的に渡すようにしました。全ピクセルを最も近いパレット色に割り当てるので、指定した色だけが残ります。
色の決め方は3通り。
- 最頻色ベースの自動抽出（面積の広いベタ塗り＝本物の色を優先）
- 元画像をスポイトでクリックして拾う（原寸ピクセルから正確に取得。対応ブラウザではネイティブEyeDropperも利用）
- カラーピッカーで手入力
透過対応
パレットに透明エントリ（a:0）を1つ加えることで、透明ピクセルをそこへ割り当て、透過を維持します。さらに「白を透過にする」を選ぶと、変換前にキャンバス上で白に近い画素のアルファを落とす前処理を入れて、白背景を抜きます。
AIを使わない「ローカル整形」
不要パスの削除・同色パスの統合・透明パスの除去・座標の丸めを、ブラウザ内で実行します。APIもトークンも使いません。これだけでパス数とファイルサイズがかなり減ります。
拡大比較ビュー
元画像と結果を並べ、共有ズームスライダーで同倍率まで拡大して見比べられます。背景は市松・白・黒に切替可能。「拡大したらガタガタだった」をダウンロード前に確認できます。
AI仕上げは“おまけ”です（正直な話）
変換後のSVGをAI（vision）にさらに整えてもらう機能も付けています。プロバイダは Claude / OpenAI / Gemini / Kimi から選べ、持ち込みキー方式です。
ただし正直に言うと、これはおまけです。SVGは情報量が多く、AIに渡すとトークン消費（＝コスト）が大きくなりがちで、パス数が多いほど高くつきます。ここは改良の余地が大きいところです。
現状の落としどころとしては、
- まず「ローカル整形」（無料・トークン0）で軽くする
- それでも足りなければ、軽くしたSVGだけAIに渡す
という順番が、品質とコストのバランスが良いと感じています。将来的には「AIにSVGを丸ごと書き直させる」のではなく、「AIには最適なパラメータだけ返させて、こちらで再変換する」方式に寄せると、トークンを大幅に節約できるはずで、そこは今後の宿題です。
技術・ライセンス
- potrace（Peter Selinger）のJavaScript移植版 / kilobtye … GPL
- ImageTracerJS / jankovicsandras … パブリックドメイン（Unlicense）
どちらもCDNから読み込むだけの単一HTML構成です。作者の皆さんに感謝します。
おわりに
登録もインストールも無しで、ブラウザだけでサッと画像をSVGにできる場所として作りました。無料なので気軽に試してみてください。フィードバックも大歓迎です。