PNG から SVG へ：画像をベクター化する方法

あらゆる PNG からクリーンでスケーラブルなベクター出力を得るための、最適な設定を含むステップバイステップガイドです。

なぜ PNG を SVG に変換するのか？

PNG はウェブで最も広く使われている画像フォーマットの一つです。透過をサポートし、フラットカラーのグラフィックをうまく扱い、画質を損なわずに圧縮できます。しかし PNG は依然としてラスターフォーマット、つまりピクセルのグリッドです。拡大するとエッジがぼやけ、大きなバナーに印刷すると画像が崩れてしまいます。

SVG はこの問題を解決します。スケーラブルベクターグラフィックスは、ピクセルではなく数学的なパスとして画像を保存するため、16 ピクセルのファビコンからビルボードまで、あらゆるサイズで完璧にシャープなままです。このため SVG は、ロゴ、アイコン、イラスト、そして異なる解像度で再利用する必要のあるあらゆるグラフィックに最適なフォーマットです。

PNG を SVG に変換するのは、単純なフォーマットの入れ替えではありません。このプロセスはイメージトレース（またはベクター化）と呼ばれます。ソフトウェアがビットマップの色やエッジを分析し、ベクターパスとして近似します。結果の品質は、ソース画像と選択する設定に大きく依存します。このガイドでは、無料のブラウザベースのコンバーター Any2SVG を使用したプロセス全体を説明します。毎回クリーンな SVG を作成できるようになります。

ベクターグラフィックスが初めての方は、変換ワークフローに進む前に、まず SVG とは？の紹介記事でフォーマットを理解してください。

ステップ 1：PNG をアップロードする

ブラウザで Any2SVG を開きます。ファイルを読み込む方法はいくつかあります：

ドラッグ＆ドロップで PNG をコンバーターエリアに直接配置します。
ファイルピッカーをクリックしてデバイスを参照します。
クリップボードから貼り付け — スクリーンショットを撮るか画像をコピーし、ツールに直接貼り付けます。
画像 URL を入力してウェブから PNG を取得します。
Dropbox、Google Drive、または OneDrive から、ファイルを先にデバイスにダウンロードすることなくインポートします。

Any2SVG は最大 10 MB の PNG ファイルを受け付けます。複数の PNG を変換する場合は、すべてを一度に選択してください。ツールはバッチ変換をサポートしているため、1 回のセッションでアセット一式を処理できます。

ステップ 2：画像を準備する

トレースの前に、ソースを整えましょう。より良い入力は常により良いベクター結果につながります。

余白をクロップする

内蔵のクロップツールを使って、被写体の周囲にある不要な余白や背景エリアを除去します。クロップエディターは自由選択と固定された 1:1 アスペクト比をサポートし、タッチスクリーンではピンチズームで精密なフレーミングが可能です。変換前に不要なスペースを除去することで、出力される SVG がコンパクトで的確なものになります。

速度のためにリサイズする

非常に大きな画像のトレースには時間がかかり、必ずしもより良い SVG が生成されるとは限りません。PNG の幅が約 2000 ピクセルを超える場合は、先に縮小することを検討してください。Any2SVG は、幅、高さ、正確な寸法、パーセンテージ、一般的なプリセットなど、複数のリサイズモードを提供しています。小さなソース画像はトレースが速く、トレーサーが処理するノイズが少ないため、よりクリーンなパスが生成されることが多いです。

自動回転とメタデータの削除

自動回転を有効にすると、Any2SVG が EXIF の回転データを読み取り、トレース前に画像を正しく表示します。コンバーターは出力 SVG から埋め込まれたメタデータ（EXIF、XMP）も削除するため、カメラの詳細情報や GPS 座標が公開ファイルに引き継がれることはありません。

ステップ 3：ベクター化の設定を調整する

ここが本当のコントロールポイントです。Any2SVG は、出力 SVG の品質とサイズに直接影響する細かいオプションを提供しています。各設定の機能と使い方を説明します：

色の数

トレーサーが作成する個別のカラー領域の数を制御します。ロゴ、アイコン、シンプルなアートワークには 2 から 8 色を使用してください。詳細なイラストやグラデーションのある画像には 16 色以上に増やしてください。色が少ないほどシンプルで小さな SVG になり、色が多いほど微妙なトーンの違いを捉えますが、ファイルの複雑さが増します。

ディテールレベル

トレーサーがエッジやカーブにどれだけ忠実に追従するかを決定します。ディテールが高いと微妙な特徴が保持されますが、ソース画像からのノイズが入る可能性があります。ディテールが低いと、よりスムーズでスタイライズされた出力になります。中程度の設定から始めて、そこから調整してください。

パスの最適化

不要なコントロールポイントを除去して、生成されたベクターパスを簡略化します。最適化が高いほどファイルサイズが小さくなり、カーブがスムーズになります。ロゴやクリーンなアートワークには、最適化を高く設定してください。すべてのエッジを保持したい詳細なイラストには、中程度に保ってください。

座標精度

パス座標に使用する小数点以下の桁数を設定します。精度が高いほどパスは正確になりますが、ファイルも大きくなります。ほとんどのユースケースでは、小数点以下 1 から 2 桁が精度とファイルサイズの優れたバランスを提供します。

その他のオプション

レイヤーモード — レイヤー分け（各色を個別のレイヤーに配置）とスタックレンダリングから選択します。レイヤー出力は、Inkscape や Illustrator などのベクターツールで編集しやすくなります。
ブラー — トレース前にノイズの多い入力をスムーズにするための軽い前処理ブラーを適用します。圧縮アーティファクトやザラつきのあるテクスチャを持つ PNG に有効です。
viewBox — 出力 SVG に明示的な viewBox 属性を切り替えます。この属性は、グラフィックを HTML に埋め込んだ際のスケーリング方法を制御します。

画像タイプ別の推奨設定

画像タイプ	色	ディテール	最適化	備考
シンプルなロゴ	2 – 4	低 – 中	高	色が少ない = ファイルが小さく、エッジがシャープ
マルチカラーアイコン	4 – 8	中	高	ディテールとクリーンなパスのバランス
詳細なイラスト	16 – 32	高	中	より多くの色でグラデーションとシェーディングを捉える
線画 / スケッチ	2 – 4	高	中	高ディテールで細い線を保持
写真（シンプル）	32+	高	低	大きな SVG。SVG が適切なフォーマットか検討してください

フォーマット固有のヒントについては、JPG から SVG への変換ヒントをご覧ください。圧縮写真から派生した PNG ソースにも同じ原則の多くが適用されます。

ステップ 4：SVG をダウンロードする

プレビューに満足したら、完成した SVG をダウンロードします。単一ファイルの場合は、ダウンロードボタンをクリックして直接保存します。バッチで複数の PNG を変換した場合、Any2SVG はすべての結果を ZIP アーカイブにまとめます。ブラウザ内で fflate を使用して高速かつ軽量に圧縮されます。

ダウンロード後、ブラウザまたは Inkscape、Figma、Adobe Illustrator などのベクターエディターで SVG を開いて結果を確認します。エッジ、カラー領域、全体のファイルサイズをチェックしてください。何か問題がある場合は、Any2SVG に戻って設定を調整し、再変換してください。繰り返しは通常のことで、数秒で完了します。

まとめ

トレースが近似であり、ロスレスなフォーマット変換ではないことを理解すれば、PNG から SVG への変換は簡単です。主要なステップはシンプルです。PNG をアップロードし、クロップとリサイズツールで準備し、画像タイプに適したベクター化設定を選び、完成した SVG をダウンロードするだけです。

ほとんどのロゴやアイコンには、色数を少なく、最適化を高くすることで最良の結果が得られます。詳細なイラストには、色とディテールを増やし、ファイルが大きくなることを受け入れてください。写真については、変換を行う前に SVG が本当に適切な出力フォーマットかどうかを検討してください。

Any2SVG はプロセス全体を無料、高速、プライベートに実現します。すべてがブラウザ内で動作します。ご自身の画像で試して、クリーンでスケーラブルなベクターグラフィックスをいかに素早く作成できるかをご体験ください。

今すぐ PNG を SVG に変換する