メインコンテンツへ移動
ToolsByUs

SVGベクター化

ロゴやシンプルな画像を、ブラウザ内で編集可能なSVGに変換します。色数、簡略化、角、透明度を調整できます。独自のアルゴリズムをローカルのworkerで実行し、処理前に長辺を最大900ピクセルへ縮小します。画像はサーバーへ送りません。

端末内で処理

ここに画像をドロップ

ページのどこにでもドロップできます · ファイルを選択 · 100 MB

対応形式： JPG, JPEG, PNG, WebP, AVIF, HEIC, HEIF, GIF, BMP

画像はこのタブでデコード・ベクター化・描画します。このツールにサーバーはないため、消すものも保存方針もありません。

SVGベクター化はどう動きますか？

独自のアルゴリズムで画像を小さなパレットに減色し、各ピクセルを色に割り当てます。色の領域がはっきりしたロゴ、アイコン、イラストに適しています。写真やグラデーションでは形が多くなりやすくなります。

色の領域の境界を閉じた輪郭につなぎます。色ごとの輪郭を`fill-rule="evenodd"`のパスにまとめ、形の中の空白を保ちます。

簡略化は点の数を減らし、角のしきい値はどの方向変化を滑らかにするかを決めます。長辺を最大900ピクセルにした画像をローカルのWeb Workerで処理し、細かすぎる輪郭には複雑さの上限を設けています。

完全に透明なピクセルは、アルファのしきい値がゼロでもベクター化しません。レイヤーの順序を反転する設定は描画順だけを変え、色は反転しません。出力SVGはパスと色を含み、元の画像を埋め込みません。

元の画像とトレース設定

logo.png · 1200 × 400
色 2
単純化 1.2px
角のしきい値 60°

生成したSVG

<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 900 300" width="900" height="300">
  <path fill="#1b1b1f" fill-rule="evenodd" d="M10 10H890V290H10ZM100 100V200H800V100Z"/>
</svg>

SVGベクター化が対応するオプションとエッジケースは？

技術リファレンスとオプション
パラメータ型デフォルト動作とエッジケース
色数2–82パレットの色数を指定します。少ない色数では、形やパスも簡潔になりやすくなります。
簡略化ピクセル1.2輪郭から点を取り除く許容差を指定します。大きな値ほど細部とSVGのサイズを減らします。
角のしきい値度60°どの方向変化を滑らかにし、どれを角として残すかを決めます。
アルファのしきい値0–2558しきい値より不透明度の低いピクセルを除外します。アルファ0のピクセルは常に除外します。
レイヤー順を反転切り替え無効色レイヤーを描く順序を反転します。色の値自体は反転しません。
処理画像の大きさ最大900px上限あり長辺を最大900ピクセルへ縮小してから、ローカルのworkerでベクター化します。

よくある質問

PNGロゴをSVGに変換するには？

PNGを選び、少ない色数から試してください。色の領域と輪郭を見つけ、SVGのパスを書き出します。簡略化と角の設定で、細部と点の数のバランスを調整します。

撮影したロゴのベクター化がうまくいかないのはなぜ？

写真は均一な色の領域よりも、照明、ノイズ、グラデーションを含むことが多く、図形以外の輪郭も生まれます。平坦な色、十分なコントラスト、すっきりした背景の画像を使うか、先に画像を調整してください。

ベクター化したSVGはIllustratorやFigmaで編集できますか？

はい。元のビットマップを埋め込まず、編集可能な輪郭と塗り色を持つ`<path>`要素を書き出します。`evenodd`で内部の空白を保ちます。編集のしやすさは、点の数と画像の複雑さによって変わります。

PNGの透過はどうなりますか？

完全に透明なピクセルはベクター化しません。アルファのしきい値で、縁などの半透明のピクセルも除外できます。しきい値がゼロでも、アルファ0のピクセルは結果に含まれません。

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

いいえ。このブラウザで画像をデコードして縮小し、ローカルのWeb Workerでベクター化します。ファイルをサーバーへ送らず、端末内でSVGを生成します。

SVGが大きくなりすぎるのはなぜ？

写真、ノイズ、多い色数は輪郭を増やします。色数を減らすか、簡略化を強めてください。処理画像の長辺は最大900ピクセルです。複雑さが上限を超える場合は処理を止め、メッセージを表示します。

ToolsByUsチーム · ツールの検証方法