[2026/9/7]

[WEB App] Bitmap to SVG Tracer v1 — ブラウザ完結型ラスタ→ベクタSVG変換ツール

[WEB App] Bitmap to SVG Tracer v1 — ブラウザ完結型ラスタ→ベクタSVG変換ツール

Bitmap to SVG Tracer

ラスタ画像（PNG・JPEG・WebP 等）をサーバーにアップロードすることなく、ブラウザ内だけでベクタ SVG に変換するツール。

Potrace の WebAssembly ビルド（esm-potrace-wasm）を使用し、ビットマップ画像を滑らかなベジェ曲線で構成された SVG に変換します。B/W トレースとカラーポスタライズの2モードに対応。

スクリーンショット

SAMPLEロゴ — カラーポスタライズ Compare 表示（JPEG 12.5KB → SVG 100.9KB、825パス、16色）

Bitmap to SVG Tracer — SAMPLEロゴのカラーポスタライズ

VRM キャラクター — Original タブ表示（WebP 19.7KB → SVG 238.5KB、1799パス、37色）

Bitmap to SVG Tracer — VRMキャラクター Original表示

VRM キャラクター — SVG タブ表示（トレース結果のみ）

Bitmap to SVG Tracer — VRMキャラクター SVG表示

動画（GIF）

トレース操作

Bitmap to SVG Tracer — トレース操作デモ

特徴

  • ブラウザ完結 — ファイルはブラウザ内で処理。サーバーへのアップロードは一切なし
  • 2つのトレースモード — B/W Trace（白黒二値化）と Color Posterize（多色階調）を切り替え可能
  • 全パラメータ調整 — Potrace の主要パラメータ（Turd Size・Alpha Max・Turn Policy・Opt Tolerance 等）を UI から操作
  • Compare 表示 — Before/After を左右分割で並べて比較。Original / SVG タブ切り替えにも対応
  • カラーパレット抽出 — SVG から使用色を自動抽出し、スウォッチ表示。クリックで HEX 値をクリップボードコピー
  • SVG 情報パネル — 出力サイズ・パス数・色数・処理時間・圧縮率をリアルタイム表示
  • 高速処理 — WASM による処理で、一般的な画像は 100ms 以下で変換完了

使い方

1. 画像を読み込む

画面左のドロップゾーンに画像ファイル（PNG / JPEG / WebP / BMP / GIF 等）をドラッグ&ドロップするか、クリックしてファイルを選択。

2. モードを選択する

モード説明向いている用途
B/W Trace画像を白黒に二値化してトレースロゴ・線画・シルエット・スタンプ
Color Posterize画像を複数の色階調に分割してトレース写真・イラスト・キャラクター画像

3. パラメータを調整する

パラメータ説明効果
Posterize Level色の階調数（1〜10）大きいほど色数が増えて原画に近づく
Turd Sizeノイズ除去閾値（0〜100）大きいほど小さな斑点を除去
Alpha Maxコーナー閾値（0〜1.34）小さいほど角が鋭く、大きいほど丸まる
Opt Tolerance曲線最適化の許容誤差（0〜1）大きいほどパス数が減り軽量化
Turn Policyパス方向の解決方針minority（デフォルト）で大抵OK
Optimize Curvesベジェ曲線の最適化OFF にするとポリゴン的な出力に
Extract Colorsカラー抽出Color モードで色を分離するか
Algorithmポスタライズ手法Interpolation のほうが自然な結果

4. トレースを実行する

「✦ TRACE」ボタンをクリック。処理が完了すると中央に Compare 表示（左: Original / 右: SVG）が表示されます。

5. SVG をダウンロードする

「⬇ DOWNLOAD SVG」ボタンで、元ファイル名ベースの .svg ファイルとして保存。

対応入力フォーマット

ブラウザが <img> タグで表示できる画像形式すべてに対応しています。

フォーマット拡張子
PNG.png
JPEG.jpg, .jpeg
WebP.webp
BMP.bmp
GIF.gif（最初のフレーム）
SVG.svg（ラスタライズしてからトレース）
AVIF.avif（ブラウザ対応状況による）

技術スタック

  • esm-potrace-wasm v0.5.1 — Potrace の WebAssembly ビルド（WASM base64 インライン、76KB）
  • Astro — ページビルド・スクリプトバンドル
  • Canvas API — 画像データの取得（Potrace への入力）

技術記事

更新履歴

  • [v1.0] (2026-09-07): 初回公開。
    • esm-potrace-wasm (v0.5.1) によるラスタ→ベクタ SVG 変換
    • B/W Trace・Color Posterize の2モード対応
    • 全 Potrace パラメータの UI 調整
    • Compare 表示（Before/After 左右分割比較）
    • SVG 情報パネル（サイズ・パス数・色数・処理時間・圧縮率）
    • カラーパレット抽出・クリップボードコピー
    • SVG ダウンロード