PNG/JPGからSVGへの変換がうまくいかない？よくある問題と解決方法

なぜSVGの見た目がおかしいのか？

PNGやJPGをアップロードして変換ボタンを押したのに、出力されたSVGの見た目が…おかしい。エッジがギザギザだったり、ファイルが巨大だったり、何千もの不要なノードがあったり、色がオリジナルと合わなかったり。あなただけではありません――これらはラスターからベクターへの変換で最もよくある問題です。

良いニュースがあります。これらの問題のほぼすべてに解決策があり、そのほとんどは設定を数秒調整するだけで解決できます。重要なポイントは、トレースは単なるフォーマット変換ではないということです。ラスター画像をSVGに変換するということは、アルゴリズムがピクセルデータをベクターパス（曲線、直線、塗りつぶし）として数学的に近似することを意味します。その近似の品質は、ソース画像と選択したトレース設定に依存します。

このガイドでは、最もよくある5つの変換問題を解説し、それぞれの原因と具体的な解決方法をお伝えします。このトピックが初めての方は、SVGとは？の入門記事で基本を確認し、ラスター vs ベクターの比較記事で2つのフォーマットの違いを理解してください。

問題1：ジャギーまたは階段状のエッジ

ジャギー（階段状のエッジやエイリアシングとも呼ばれます）は、初めての変換後に最もよくある問題です。滑らかな曲線ではなく、ブロック状でピクセル化されたアウトラインが表示され、元のラスター画像よりも悪く見えます。

なぜ起こるのか

トレーサーが滑らかな曲線を再構築するのに十分な情報を持っていない場合にジャギーが発生します。通常、以下の1つ以上が原因です：ソース画像の解像度が低すぎる、ディテール設定（ラインとカーブのしきい値）が厳しすぎる、または色数が少なすぎてトレーサーがエッジと背景を区別できない。

解決方法

• ディテールを増やす。Any2SVGでラインとカーブのしきい値を下げて、トレーサーがショートカットせずにエッジをより忠実に追跡するようにします。
• 色数を増やす。色数を増やすことで、トレーサーがより繊細な色の遷移を認識し、より滑らかな境界を生成できます。
• 高解像度のソースを使用する。100 × 100 pxのアイコンは、同じグラフィックの800 × 800バージョンに比べて、トレーサーに与える情報がはるかに少なくなります。可能な限り、最も大きなソースから始めてください。
• ブラー前処理を有効にする。軽いガウシアンブラーがトレース開始前にピクセルレベルのノイズを滑らかにし、アルゴリズムがよりクリーンな曲線を生成するのに役立ちます。

推奨設定を含むステップバイステップのガイドは、PNGからSVGへのガイドをご覧ください。

問題4：SVGが元の画像と一致しない

変換はエラーなく完了したのに、SVGがソースとは明らかに異なって見えます――色がずれている、細部が欠けている、全体の形状が変わっているなど。これはグラデーション、シャドウ、似た色が多い画像で特によく見られます。

なぜ起こるのか

トレースは常に近似です。アルゴリズムはソースの何百万もの色を限られたパレットに量子化し、似た色の領域の周りにベクター領域を描きます。トレーサーの解像度しきい値以下の細部は失われます。グラデーションはフラットカラーの段階的な帯になります。アンチエイリアスされたエッジは単一の曲線に簡略化されます。これらは自動トレースの固有の制限であり、バグではありません。

解決方法

• 色数を増やす。より多くの色があれば、トレーサーが使えるパレットエントリが増え、オリジナルにより近い結果が得られます。
• ディテールを増やす。ラインとカーブのしきい値を下げて、トレーサーがより細かい形状をキャプチャし、スムーズ化しないようにします。
• トレードオフを受け入れる。トレースはハイコントラストでシンプルな画像（ロゴ、アイコン、ラインアート）に最適です。複雑な画像のピクセルパーフェクトな再現が必要な場合は、ラスター形式が適切なツールです。詳しくはラスター vs ベクターの比較記事をご覧ください。

テキストを含む画像の場合、トレーサーは文字の形をパスに変換し、編集可能なテキストにはならないことに注意してください。結果は近く見えますが、元のレンダリングされたフォントほど鮮明ではありません。

問題5：SVGにJPEG圧縮アーティファクトが含まれる

ソースがJPEGで、出力されたSVGがブロック状のにじみ、エッジ周りのハロー、元の画像では見えなかった奇妙な色の帯で満ちています。SVGがなぜか元のJPGよりも悪く見えます。

なぜ起こるのか

JPEG圧縮は画像を8 × 8ピクセルのブロックに分割し、各ブロック内の色の精度を下げることで機能します。通常の表示サイズではこれらのアーティファクトはほぼ見えませんが、トレースアルゴリズムはそれらを本物の色の遷移として検出し、1つ1つ忠実にトレースします。その結果、ラスター版では隠れていた圧縮アーティファクトを増幅するSVGが生成されます。

解決方法

• ブラー前処理を有効にする。トレース前のガウシアンブラーパスがブロック状のノイズやリンギングアーティファクトを滑らかにし、トレーサーがそれらを再現しないようにします。
• 可能であればPNGソースを使用する。PNGはロスレスなので、トレーサーが拾う圧縮アーティファクトがありません。選択肢がある場合は、トレースソースとしてJPGよりも常にPNGを優先してください。
• 色数を減らす。量子化された色が少なければ、トレーサーがアーティファクトレベルの色の変化に対して個別のパスを作成する可能性が低くなります。

JPEG固有のアドバイスについては、ロッシーソース画像の最適な設定をカバーするJPGからSVGへのヒントの記事をご覧ください。

より良い結果を得るために

SVG変換の問題のほとんどは、ソース画像の複雑さとトレース設定のミスマッチに起因します。クリーンなエッジと少ない色のシンプルなグラフィックは、最小限の調整で美しくトレースできます。複雑な画像にはより多くの注意が必要です――そして時には、その特定の画像にはラスター形式の方が適切であるというのが正直な答えです。

要約すると：手持ちの最良のソースから始め、色を許容できる最小限に減らし、ノイズの多いソースやJPEGソースにはブラーを有効にし、パス最適化を上げ、被写体にタイトにクロップします。これら5つのステップで変換問題の大部分が解決します。

もう一度試す準備はできましたか？Any2SVGで設定を調整して再変換してください。すべてブラウザ内で実行されるため、繰り返しは瞬時に行え、ファイルはプライベートに保たれます。