どのプリセットを選べばいい?

ロゴ・イラストなら『フルカラー (16 色)』が万能。アイコンやシルエットなら『ポスタライズ (4 色)』で最小サイズ。線画スケッチやモノクロ写真は『グレースケール (7 階調)』、写真は『高ディテール (64 色)』、手書き風は『なめらか線』。色数が多いほど SVG ファイルサイズも増えます。

写真をベクター化するとどうなる?

ベクター化はあくまで近似なので、写真の細部は失われます。『高ディテール』モードで色数 64 を選んでも、結果はやや絵画タッチの近似 SVG になります。写真の解像度フリー化が目的なら素直に PNG/JPG を残し、ベクター化はロゴ・イラスト・アイコン用途に絞るのがおすすめ。

SVG ファイルが大きくなりました

色数 (16 → 4) を下げる、もしくは『なめらか線』『curvy』系のプリセットで線の数を減らすとファイルサイズを抑えられます。さらに小さくしたい場合は本サイトの svg-optimize ツールで後処理してください。

GIF アニメは扱えますか?

1 フレーム目だけが処理されます。アニメ GIF を 1 フレームずつベクター化したい場合は、まず gif-frame-extract ツールでフレーム分割してから個別に本ツールに通してください。

imagetracerjs のライセンスは?

Unlicense (パブリックドメイン同等)。本サイトでも自由に利用しています。アルゴリズムの詳細は GitHub の jankovicsandras/imagetracerjs を参照ください。

入力データはサーバーに送信されますか?

いいえ。imagetracerjs は完全にブラウザ内で動くので、画像がネットワークに出ることはありません。

画像へ戻る

画像 → SVG ベクター化 — ラスター画像をパスに変換

PNG / JPG / WebP / GIF のラスター画像を imagetracerjs でベクター化し SVG として出力します。フルカラー (16 色)、ポスタライズ (4 色)、グレースケール (7 階調)、線画 (ハイディテール)、なめらか (curvy) の 5 プリセットから選択可能。ロゴ・アイコン・イラストの解像度フリー化や、線画スケッチの整え直しに。ベクター化結果は SVG 文字列でコピーまたは .svg ダウンロード可能。すべてブラウザ内で完結し、画像は外部に送信されません。

画像変換

使い方

画像ファイル (PNG / JPG / WebP / GIF) を 1 つドロップ、もしくは「ファイルを選択」から読み込みます。プリセットを 5 種から選び (フルカラー / ポスタライズ / グレースケール / 高ディテール / なめらか線)、「SVG に変換」を押すと imagetracerjs が画像を解析してパス化された SVG を生成します。結果は SVG プレビュー (実サイズ) + SVG ソース (テキスト) で確認可能。ロゴの解像度フリー化、手書きアイコンの整え直し、写真からのシルエット作成などに便利です。複雑な写真をフルカラー / 高ディテールで変換すると SVG ファイルが大きくなる (数 MB) ことがあるので、用途に応じてポスタライズに切り替えると軽量になります。

よくある質問

どのプリセットを選べばいい?: ロゴ・イラストなら『フルカラー (16 色)』が万能。アイコンやシルエットなら『ポスタライズ (4 色)』で最小サイズ。線画スケッチやモノクロ写真は『グレースケール (7 階調)』、写真は『高ディテール (64 色)』、手書き風は『なめらか線』。色数が多いほど SVG ファイルサイズも増えます。
写真をベクター化するとどうなる?: ベクター化はあくまで近似なので、写真の細部は失われます。『高ディテール』モードで色数 64 を選んでも、結果はやや絵画タッチの近似 SVG になります。写真の解像度フリー化が目的なら素直に PNG/JPG を残し、ベクター化はロゴ・イラスト・アイコン用途に絞るのがおすすめ。
SVG ファイルが大きくなりました: 色数 (16 → 4) を下げる、もしくは『なめらか線』『curvy』系のプリセットで線の数を減らすとファイルサイズを抑えられます。さらに小さくしたい場合は本サイトの svg-optimize ツールで後処理してください。
GIF アニメは扱えますか?: 1 フレーム目だけが処理されます。アニメ GIF を 1 フレームずつベクター化したい場合は、まず gif-frame-extract ツールでフレーム分割してから個別に本ツールに通してください。
imagetracerjs のライセンスは?: Unlicense (パブリックドメイン同等)。本サイトでも自由に利用しています。アルゴリズムの詳細は GitHub の jankovicsandras/imagetracerjs を参照ください。
入力データはサーバーに送信されますか?: いいえ。imagetracerjs は完全にブラウザ内で動くので、画像がネットワークに出ることはありません。

類似のツール

画像形式変換 — JPG / PNG / WebP 相互

画像を JPEG / PNG / WebP の間で変換します。ブラウザの Canvas で再エンコードするのでネット通信なし。JPEG/WebP は品質スライダー対応。複数ファイル一括処理 + ZIP ダウンロード対応。

画像変換

画像モノクロ化 — グレースケール 5 方式 (輝度・チャンネル別)

JPEG / PNG / WebP をブラウザ内でグレースケール化します。変換方式は平均 / 輝度 (BT.601) / 赤 / 緑 / 青チャンネル単独の 5 種類から選択可能。出力形式 (PNG / JPEG / WebP) と JPEG / WebP の品質も調整できます。アップロードした画像は外部に送信されず、すべて Canvas でブラウザ内処理されます。

画像色

SVG 最適化 — 不要属性削除でサイズ削減

SVGO で SVG を最小化し、Before / After のファイルサイズ・削減率を表示します。数値の精度、id 属性 / `<title>` / `<desc>` の除去などをオン/オフで調整可能。viewBox は安全のためデフォルトで保持。Web フォントやコンポーネントに埋め込む前のクリーンアップに。すべてブラウザ内で処理し、SVG は外部に送信されません。

開発画像整形

AVIF を JPG / PNG / WebP に変換 — 古い Safari でも開ける形式へ

ブラウザネイティブの AVIF デコーダで .avif 画像を読み込み、JPEG / PNG / WebP として書き出します。AVIF はファイルサイズが小さく Web 配信向きですが、古い Safari やビューアでは開けないことが多く、メール添付や Office / Slack などへの貼り付けにも不向きです。複数ファイルを一括変換して ZIP でまとめてダウンロードもできます。アップロードした画像は外部に送信されず、すべての処理はブラウザ内で完結します。

画像変換