PNGをSVGに無料変換：3つのベストな方法

PNGはラスター形式です — ピクセルを保存します。SVGはベクター形式です — 図形、パス、 そしてどのサイズでも描画する方法を保存します。PNGをSVGに変換するということは、 ピクセルの形をトレースしてベクターパスに変換することを意味します。これはロゴ、 アイコン、シンプルなイラストには有効ですが、写真や複雑な画像にはうまくいきません。 3つの最高の無料方法をご紹介します。

PNG→SVG変換がうまくいく場合

自動トレースが綺麗なSVG出力を生成する場合：

• ロゴとワードマーク：明確なエッジを持つフラットカラーロゴは 綺麗なパスにトレースされます。透明または白背景の白黒ロゴが最も効果的です
• アイコンとシンボル：シンプルな幾何学的形状、矢印、UIアイコン
• シルエット：単色のソリッドシェイプ
• 線画：白背景に黒いアウトライン

自動トレースがうまくいかない場合：

• 写真：トレースされた写真は元のPNGより大きく、元の写真とは まったく異なる数千の小さなパスを生成します
• グラデーションとシャドウ：滑らかな色の遷移はシンプルなパスに トレースされません — 結果が複雑で使用できません
• 詳細なイラスト：複雑なテクスチャや細かいディテールは 簡単に編集できない数百のパスを作成します

方法1：Inkscape（無料、デスクトップ）

Inkscapeは最高の無料ベクターエディターで、最高品質のPNG-SVG変換を提供します。 Windows、Mac、Linux用の無料オープンソースです。

1. inkscape.orgからInkscapeをダウンロードしてインストール
2. ファイル → インポートに移動してPNGファイルを開く
3. インポートした画像を選択（クリック）。パス → ビットマップのトレースに移動
4. ビットマップのトレースダイアログで：
   • 白黒またはシンプルなロゴ：輝度の閾値を選択 — 閾値より明るいピクセルは白（透明）に、低いピクセルは黒（塗りつぶし）になります
   • カラーロゴ：色を選択し、ロゴの色数に合わせてパス（色）数を設定
   • よりクリーンなパスのためにスムーズとスキャンを重ねるをチェック
5. 適用をクリック。PNG上にベクターオーバーレイが現れます
6. ベクターをPNGから移動、元のPNGを削除、SVGとして書き出す：ファイル → 名前を付けて保存 → プレーンSVG

Inkscapeのビットマップトレースはトレースパラメータを細かく制御できます — クリーンで編集可能なSVGが必要なときの最高の選択肢です。

方法2：オンライン自動トレーサー（インストール不要）

ソフトウェアインストールなしにPNGをSVGに変換するいくつかの無料オンラインツールがあります：

• Vector Magic（vectormagic.com）：プロ品質のオンライントレーサー、 無料変換は限定的ですが高品質
• Convertio：基本トレースを使ってPNGをSVGにアップロード・変換 — シンプルなロゴとアイコンに良い
• SVGConvert.net：シンプルなドラッグ＆ドロップPNG→SVG変換

オンライントレーサーの場合：PNGをアップロードしてSVGをダウンロードし、InkscapeまたはブラウザÕで 開いて品質を確認してください。シンプルなロゴはオンラインツールでよくトレースされますが、 複雑な画像は通常Inkscapeの手動調整が必要です。

方法3：Adobe Illustrator（画像トレース）

Adobe Illustrator（有料）にアクセスできる場合、最も強力なトレースエンジンを持っています：

1. IllustratorでPNGを開く（ファイル → 配置またはドラッグ）
2. 画像を選択。プロパティパネルで画像トレースをクリック、またはオブジェクト → 画像トレース → 作成に移動
3. 画像トレースパネルでプリセットを選択：
   • 白黒ロゴ：シンプルな白黒ロゴ用
   • 3色 / 6色 / 16色：フラットカラーロゴ用
   • 高精細写真：写真コンテンツ用（非推奨）
4. クリーンなパスを得るために閾値（白黒用）または色数を調整
5. ツールバーで拡張をクリックしてトレース結果を編集可能なベクターパスに変換
6. SVGとして保存：ファイル → 書き出し → 別名で書き出し → SVG

より良いPNG→SVG結果のためのヒント

• 高解像度PNGから始める：より大きなソース画像はトレーサーにより多くの ディテールを提供します。100×100 pxより1000×1000 pxのPNGの方がよくトレースされます
• まず背景を削除：ロゴに白色やカラー背景がある場合、トレーサーが ロゴの形だけを見るように削除してください。トレース前に背景を削除できるツールを使用してください
• コントラストを上げる：高コントラストのエッジは柔らかい、またはぼやけた エッジよりもクリーンにトレースされます。PNGにアンチエイリアスのかかったエッジがある場合、 トレース前にコントラストを上げてください
• トレース後にパスを単純化：Inkscapeでトレース後パス → 単純化に 移動して、形を大きく変えずにノード数を減らしてください
• ファイルサイズを確認：シンプルなロゴの良いSVG変換は50 KB未満であるべきです。 SVGが元のPNGより大きい場合、トレースが複雑すぎます — パスを単純化するか色を減らしてください

PNG vs. SVG：変換後に得られるもの

• スケーラビリティ：SVGはどのサイズでも完全にシャープです — 100×100 pxでも10000×10000 pxでも。PNG版は拡大するとぼやけます
• ファイルサイズ：シンプルなロゴのSVGは通常5〜30 KB。 同じロゴの高解像度PNGは100〜500 KBかもしれません
• 編集可能性：SVGパスはInkscapeまたはIllustratorで編集可能 — 色の変更、パスの変形、要素のアニメーション
• Web使用：SVGはHTMLで直接使用でき、CSSでスタイリング、 JavaScriptでアニメーション可能 — PNGはできません

変換後、SVGをサポートしないプラットフォーム向けにラスター版がまだ必要な場合は、 PNGソースに画像圧縮を使用してください。