PNG→SVG変換ツール修正版

完全クライアント処理。PNGのみ・2MB以下。背景は常に透明。
💡 高精度モード=最大64色・全ディテール保持（ファイル大）｜通常モード=16色・適度に軽量化（推奨）

通常モード（バランス重視・軽量）高精度モード（品質最優先・重い）

ここにPNGをドラッグ＆ドロップ

または

対応: PNGのみ・2MB以下。処理はブラウザ内で完結します。

診断

🎯 Illustratorで画像をSVG化する最短手順（2025年最新版）

Illustratorで配置した画像（JPG, PNGなど）を、背景が透明で滑らかなSVGベクターデータに変換する最新の手順です。

ステップ1：画像をベクター化する

まず、SVGの元になる「パス」データを作ります。

画像を配置:IllustratorにJPGやPNGなどの元画像をドラッグ＆ドロップ、または「ファイル → 配置」で読み込みます。画像が選択された状態にしてください。
画像トレースパネルを開く:上部メニューの「ウィンドウ → 画像トレース」を選択します。
トレース実行:パネル内で、目的に合わせて「プリセット」を選びます。
- ロゴ・図形: 「白黒ロゴ」または「高精度ロゴ」
- 写真・イラスト: 「高精度写真」または「16色」
背景を透明にする（最重要）:パネル内の「詳細」を開き、「白を無視」に必ずチェックを入れます。✅（「プレビュー」にチェックを入れておくと、結果を見ながら調整できます）
ベクター化を確定:画像トレースパネルの「トレース」ボタンを押し、続けて上部コントロールバーにある「拡張」ボタンをクリックします。これで、画像が編集可能な「パス」に変換されました。

[Adobe Illustratorの画像トレースパネルで「白を無視」をハイライトした画像]

「白を無視」でほとんどの背景は消えますが、稀に不要な透明のパス（ゴミ）が残ることがあります。

白い部分を選択:「選択 → 同じ → 塗りのカラー」を選びます。（もし白いパスが残っていれば、それがすべて選択されます）
削除:Deleteキーで削除します。
- Tip: もしアートボード全体が選択されたら、それは「白」ではなく「透明」になっている証拠なので、何も削除せずCtrl+Zで戻ってください。

　（またはショートカット：Shift + Oでアートボードツール → 右上の「アートボードを選択オブジェクトに合わせる」ボタン）
→ これでアートボードのサイズがオブジェクトぴったりになります。

古い「書き出し形式」ではなく、最新の**「アセットの書き出し」パネル**を使うのが簡単で確実です。

項目	推奨設定	理由
スタイル	プレゼンテーション属性	最も互換性が高く、コードが読みやすい
フォント	アウトラインに変換	文字化けやフォント未導入環境での崩れを防ぐ
画像	埋め込み	(今回は関係ありませんが、これが標準です)
小数点	1 (または 2)	ファイルサイズに直結します。Web用なら「1」で十分です。
レスポンシブ	チェックを外す	チェックを入れると`width`と`height`が消え、意図せず拡大縮小されるため

Illustratorから書き出したSVGには、まだ不要な情報が含まれています。

以下のサイトを通すだけで、さらに**20%〜50%**ほどファイルサイズを圧縮できます。