画像からSVGトレーサー

画像からSVGトレーサーは、PNG、JPG、またはその他のラスタビットマップを、クリーンで無限に拡大縮小可能なSVGベクトルに変換します。ファイルをアップロードするサーバーサイドのトレーサーや、単にbase64ビットマップを埋め込むだけの「偽物」のSVGとは異なり、このツールはすべてブラウザ内で動作します。画像をカラーレイヤーに減色し、境界追跡、Ramer-Douglas-Peucker単純化、およびChaikinの角丸平滑化を組み合わせて、各レイヤーの輪郭を本物のベクトルパスに再トレースします。ロゴ、アイコン、スケッチ、または写真をドラッグして、並べて表示されるプレビューがリアルタイムで再構築されるのを確認し、SVGマークアップをコピーするか、Figma、Illustrator、またはInkscapeで編集可能な .svg ファイルをダウンロードしてください。

このトレーサーの特徴

仕組み（5ステージのパイプライン）

使い方

1. ビットマップをアップロードする。 PNG/JPGファイルをドロップゾーンにドラッグするか、クリックして参照するか、クリップボードから貼り付け（Ctrl+V）するか、組み込みのサンプルをクリックしてトレーサーの動作を確認します。
2. プリセットを選択する。 2〜4色のマークには「ロゴ」、切り抜き形状には「シルエット」、手書きのアートには「ラインスケッチ」、ポスター化された写真には「フォトポスター」、ニュアンスのある10色出力には「詳細アート」を選択します。
3. スライダーを調整する。 「カラーレイヤー」はトレーサーが保持する固有の色の数を制御します。「平滑化」はピクセルの階段状の凹凸を丸めます。「単純化」は長い直線を折りたたみます（低い値 = より詳細、高い値 = ファイルサイズが小さくなる）。「トレース解像度」は内部の作業幅を設定します。
4. コピーまたはダウンロードする。 生のマークアップには「SVGをコピー」、編集可能なベクトルファイルには「.svgをダウンロード」、クリーンアップされたSVGを高解像度ラスタにレンダリングし直すには「.pngをダウンロード」を使用します。

最もクリーンにトレースするためのヒント

• 高コントラストの画像から始める。 単色の背景やシャープなエッジは、グラデーションの多い写真よりもはるかに綺麗にトレースできます。
• 用途に合ったプリセットを使用する。 デフォルトの「ロゴ」プリセットは3つのフラットなカラーを想定しているため、写真に使用すると不自然に見えます。自然な画像には「フォトポスター」または「詳細アート」に切り替えてください。
• 最初に単純化を上げ、次に平滑化を上げる。 単純化でポイントが削除され、平滑化で残った部分が柔らかくなります。この順序で行うことで、結果を小さく、かつ滑らかに保つことができます。
• ロゴのトレース解像度を下げる。 アイコンであれば240 pxで十分です。これ以上高くすると、パスにノイズが増えるだけです。

トレースされたSVGが活躍する場面

ベクトルロゴとアイコンは、16×16のファビコンから4Kのヒーローバナーまで、あらゆる画面サイズやDPIで鮮明な状態を維持します。トレースされたSVGは、さらに編集を加えるためのインプットとしても最適です。Figma、Adobe Illustrator、またはInkscapeでファイルを開けば、個々のパスの色変更、形状変更、またはアニメーション化が可能です。また、SVGはファーストクラスのWebフォーマットでもあります。マークアップをHTMLにインラインで貼り付けて余分なネットワークリクエストをスキップしたり、data: URI を介して background-image としてCSSに配置したり、stroke-dasharray を使ってパスのストロークをアニメーション化し、手書きの文字エフェクトを表現したりできます。

アルゴリズムの背景

古典的でゴールドスタンダードなトレーサーとして Potrace (Peter Selinger, 2003) があり、これは多角形フィッティングと曲線最適化のステージを使用して、非常に滑らかなベジエパスを生成します。完全な Potrace の移植には数千行を要するため、このツールはより軽量で、同様に十分に理解されているパイプラインを使用しています。輪郭抽出にはムーア近傍境界追跡、パスの単純化にはRamer-Douglas-Peucker（ Douglas-Peucker アルゴリズムとも呼ばれます）、平滑化にはChaikinの角丸切り落としアルゴリズムを採用しています。各ステージはパスの長さに対して O(n) であるため、トレーサー全体は典型的な 240 px の画像を1秒未満で処理し終えます。

プライバシーと安全性

すべてがローカルで実行されます。<input type="file"> 要素がファイルをブラウザに直接読み込み、Canvas API がお使いのデバイス上でピクセルデータを抽出し、JavaScript のトレーサーが画像データを含んだネットワークリクエストを送信することは一切ありません。DevTools → Network を開いて、トレース中にアップロード通信が発生しないことを確認することで、これらを検証できます。そのため、社外秘のロゴ、未公開のブランド資産、個人の写真などにも安全にツールを使用できます。

FAQ

画像はサーバーにアップロードされますか？

いいえ。画像からSVGトレーサーは100%クライアントサイドで動作します。ビットマップはブラウザに読み込まれ、Canvas APIで処理され、バニラJavaScriptでトレースされるため、ネットワーク経由で送信されることはありません。Wi-Fiを切断しても、トレーサーはそのまま動作します。

どの画像フォーマットをトレースできますか？

ブラウザがレンダリングできる任意のラスタフォーマットに対応しています: PNG、JPG、GIF（最初のフレーム）、WebP、およびBMP。既存のSVGをトレースすることも可能で（最初にラスタライズされます）、複雑なベクトルを単純化したり、色を再減色したりするのに役立ちます。

どのプリセットから始めるべきですか？

単色のロゴやアイコンには「ロゴ」プリセットを使用します。純粋な白黒の切り抜きには「シルエット」を使用します。図面や線画には「ラインスケッチ」を使用します。写真には「フォトポスター」または「詳細アート」を使用します。その後、スライダーを少しずつ動かしてみてください。ライブプレビューによって、各コントロールの役割が一目でわかります。

なぜトレースされたSVGがカクカクして見えるのです際か？

「平滑化」スライダーを上げて鋭いピクセルの角を丸くし、「単純化」スライダーを上げて長い直線を折りたたみます。また、「トレース解像度」を高くすると、トレース前により多くの詳細をキャプチャできるため、より細かい輪郭が得られます。

トレースしたSVGを後から編集することはできますか？

はい。出力はカラーレイヤーごとに1つの <path> （モノクロ/エッジモードの場合はシルエットごとに1つ）を持つプレーンなSVGマークアップです。Inkscape、Illustrator、Affinity Designer、Figma、または任意のテキストエディタで開いて、個々のパスの色変更、形状変更、またはアニメーション化を行うことができます。パスはレンダリング順（明るい色から順）に並んでいるため、任意のベクトルエディタのレイヤーパネルの並びと一致します。

入力画像のサイズはどのくらいまで対応していますか？

サイズ制限はありませんが、トレーサーは内部でビットマップを選択したトレース解像度（64–512 px）にリサンプリングします。値を高くするとより細かい詳細をキャプチャできますが、SVGのファイルサイズが大きくなります。ほとんどのロゴでは200–300 pxが最適で、詳細な写真では400–512 pxを試してみてください。

トレースされたSVGはビットマップと完全に一致しますか？

近くなりますが、完全にピクセルパーフェクトになることはありません。それがベクトル化のトレードオフです。N 個のカラーに減色すると必然的にグラデーションが失われ、パスの単純化によって小さな特徴が取り除かれます。ブランドにとって極めて重要なアセットについては、元のベクトルファイルが存在する場合は常にそこから始めるべきです。このツールは、ビットマップしか手元になく、使用可能なベクトルバージョンが必要な状況のためのものです。

トレースしたSVGは商業目的で使用できますか？

トレーサーは出力結果にウォーターマーク、著作権表記、分析スクリプトなどを一切追加しません。結果を商業的に利用できるかどうかは、元のビットマップに対してお持ちの権利に依存します。他人のロゴをトレースしても、その所有権が移転することはありません。ご自身が作成したアセット、またはベクトル化のライセンスをお持ちのアセットに対して使用してください。