品質を落とさずPNGをSVGに変換する方法と確認のポイント

PNGからSVGへのトレースは、ピクセルを図形として再構築します。再構築した作品を拡大縮小し、編集できるようにしますが、完全な複製や、元画像にない細部の復元を保証するものではありません。ロゴ、アイコン、フラットなイラストでは、SVGの完成を判断する前に輪郭、色、小さな細部を比較してください。写真は、作風を変えたい場合を除き、通常はラスターのまま残す方が適切です。

できるだけ良質なPNG、明確な用途、最終確認に使うSVG対応のエディターや制作アプリを用意してください。デザインを変えてしまう修正を元に戻せるよう、元のPNGと未加工のSVG書き出しを保管します。

PNGとSVGは異なる種類のファイル

PNGは、ピクセルのサンプルが格子状に並ぶラスター画像です。想定したサイズではきれいに見えても、大きく拡大すると格子が見え、輪郭がぼやけたり、角ばったりします。PNGの圧縮は可逆ですが、保存した画像のピクセル寸法には限りがあります。W3CのPNG 3仕様を参照してください。

SVGは、パス、曲線、塗りなどのベクター形状を保存できます。これらのベクター要素はラスター特有の粗さを生じずに拡大縮小できますが、SVGには、それぞれに制限のあるラスター画像や効果が含まれることもあります。(W3C SVG 2、SVGの埋め込みコンテンツ) 詳しくは、画像のベクター化とは？をご覧ください。

つまり「PNGをSVGに変換する」とは、ピクセル画像を編集可能な図形として再構築することです。結果の品質は、その再構築がどれだけ適切かにかかっています。

「品質を落とさずに変換する」の意味

高品質なPNGからSVGへの変換は、単に「Illustratorで開ける」だけでは判断できません。再構築したベクターの4つの性質を確認してください。

• きれいなパス：ピクセルの格子ではなく、作品の形に沿う滑らかな曲線です。
• 不要なアンカーノードがないこと：形を保つのに十分な点を使い、手作業の編集が煩雑になるほど増やさないようにします。Adobeも、編集のしやすさと滑らかな表示のために点を減らすことを推奨しています。(Adobeのパス編集ガイド、ノード数が重要な理由)
• 正確な色：単色の領域が、ほとんど同じ色の何十もの図形に分裂していません。
• 使いやすい構造：意図しない断片や重複した形状に邪魔されず、必要な部分を選択して調整できます。グループや複合パスを使うのが適切なデザインもあります。

自動トレースツールの結果は大きく異なります。細部、ノイズ、パスの適合、コーナー、色の設定では、再現性と複雑さを調整します。Adobeの画像トレースでは、これらを直接設定できます。Adobeの画像トレースオプションを参照してください。 技術的にはベクターでも編集やカットがしにくいファイルはあるため、.svgという拡張子ではなく、パスを確認してください。カッターで使うSVGなら、レーザーカット用の準備を行い、先に加工経路を確認します。

パスの複雑さを比較

品質を落とさずPNGをSVGに変換する手順

1つの方法は、自動ベクター化ツールを使った後、輪郭、アンカーの配置、色、レイヤーの再構築を確認することです。PerfectVectorでの手順は次のとおりです。

1. 元画像を選び、確認します。 スクリーンショットより元の作品を優先してください。使用するサイズで、文字の内側の穴、細い線、透明部分、最も小さい細部を確認します。
2. PNGをアップロードしてトレースします。 PNGからSVGへの変換ツールを開きます。アップロードの準備で画像が縮小または圧縮される場合は、先に準備後の画像を確認してください。その変化はトレースに影響します。製品の事実情報では、準備、変換、プレビュー、取得の各段階を区別しています。
3. 無料プレビューを元画像と比較します。 シルエット、意図的な隙間、文字、見えている色を確認します。プレビューの段階では色を編集できません。
4. 編集前に結果を取得します。 1クレジットで結果のロックを解除できます。その後、エディターで領域の色を変更したり、ほぼ同じ色を統合したりします。変更のたびに再確認してください。色数を減らすと意図した違いが消える場合があり、色の変更では重なったカット形状は統合されません。
5. 作業用のコピーをSVGとして書き出します。 さらに整える前にコピーを残してください。
6. 使用先のアプリで開きます。 寸法、図形、塗り、ストローク、オブジェクト構造を確認します。制作に使う場合は、実際の出力サイズで試してください。ブラウザーのプレビューが鮮明でも、別のアプリがすべての機能を正しく読み込めるとは限りません。

実用的な品質確認

想定サイズと拡大表示で、次を比較してください。

• 外側のシルエットは元の作品に沿っていますか？
• 文字の穴や意図的な小さな隙間は開いたままですか？
• 曲線は滑らかで、鋭くあるべき角が丸くなっていませんか？
• パレットの統合後も、色が視覚的な役割を保っていますか？
• 単なる1枚の埋め込み画像ではなく、目的の図形を選択できますか？

文字の内側の穴が消えたら、前のバージョンに戻し、細部を多めに残すか、その部分を描き直してください。余分な断片が現れたら、元画像のノイズを確認し、意図しない部分だけを取り除きます。使用先のアプリで表示が変わった場合は、すぐ全体をトレースし直すのではなく、対応していない機能を切り分けてください。SVGが粗く見える場合のガイドは、埋め込みピクセルとパス品質の問題を見分けるのに役立ちます。

インターフェース用アイコンをフォルダーごと変換する場合は、別の品質上の課題もあります。ファイル群が1つのシリーズとして機能する必要があることです。代表的なトレースが確認を通過したら、PNGアイコンをUIキット用SVGに変換する手順で、グリッド、見た目の大きさ、色の規則、納品前の確認を統一してください。

できるだけ鮮明な結果にするためのヒント

• 写真よりフラットな作品が適しています。 ロゴ、アイコン、フラットなイラストは有力な候補です。トレース結果を確認してください。細部の多い写真では、再現性への期待を変える必要があります。
• コントラストを慎重に確認します。 色あせたコピーを補正するのは、意図した細部を保てる場合に限ります。
• できるだけ良質な元画像を選びます。 小さなサムネイルより、大きく鮮明なPNGの方が輪郭の情報を多く含むことがあります。ただし、すでにぼやけたり失われたりした細部は、ピクセルを増やしても戻りません。
• 色を減らすのは後にします。 まずトレースし、結果を取得してから、パレット統合のたびに元画像と比較します。

制御のしやすさと再現性でトレース手法を比較する

どの選択肢があるかを知ると判断しやすくなります。万能な順位付けではなく、各手順でどれだけ制御でき、何を確認する必要があるかを比べることが大切です。

手作業の描き直しでは最も直接的に制御できますが、必要な時間は作品と作業者によって異なります。自動ツールの方が速いことはありますが、出力品質も画像と設定によって変わります。Adobeは画像トレースの詳細な設定を、Inkscapeはしきい値や複数スキャンの手順を公開しています。(Adobeの画像トレース手順、Inkscapeのトレースガイド) 製品を比較するなら、AI画像ベクター化ツールの比較をご覧ください。

PNGをSVGに変換しない方がよい場合

ベクター化が得意なのは、ロゴ、アイコン、イラスト、線画、文字などの形が明確なグラフィックです。写真は苦手です。写真には連続した階調の細部があり、それを図形で近似すると、ファイルが複雑になったり、単純化されてポスタライズしたような見た目になったりします。

目安として、輪郭がくっきりして色数が限られた画像はベクター化します。写真はラスターのまま残すか、忠実な再現ではなく作風を変えた結果になると考えてください。

よくある質問

PNGをSVGに変換すると品質が落ちますか？ 保存する形式を変えるだけで、品質が自動的に良くなったり悪くなったりするわけではありません。トレースしたSVGのパスは、ラスター特有の粗さを生じずに拡大縮小できますが、再現性は元画像、トレース方法、設定に依存します。単にPNGを埋め込んだSVGは、ピクセルをベクター形状に変換していません。

PNGの写真をSVGに変換できますか？ 可能ですが、通常はおすすめしません。写真をベクター化すると、巨大なファイルになるか、ポスタライズしたようになります。ベクター化はロゴ、アイコン、イラストに適しています。

PNGからSVGへの変換は無料ですか？ 変換とプレビューは無料です。1クレジットで結果を取得し、編集と書き出しができます。最初にプレビューを元画像と比較し、色エディターを使う前にロックを解除してください。書き出したSVGは使用先のアプリで試します。

変換後のSVGは何で開けますか？ Illustrator、Figma、Inkscape、Affinity Designer、Canvaなど、多くのベクター対応ツールでSVGを扱えます。フィルター、テキスト、マスク、埋め込みコンテンツなどの対応は異なるため、実際に使うアプリとバージョンでファイルを試してください。

出典

1. W3C：Portable Network Graphics (PNG) 仕様、第3版：可逆の画像表現とアルファを含む、現行のPNG標準です。
2. W3C：Scalable Vector Graphics (SVG) 2：ベクター図形、パス、描画色、SVGのレンダリングを定義する標準です。
3. W3C：SVGの埋め込みコンテンツ：PNGをSVGに入れるだけではパスへのベクター化にならない理由を示す仕様です。
4. Adobe Illustrator：画像トレースパネルのオプション：ラスタートレースの細部、パス、コーナー、ノイズ、色を調整する公式設定です。
5. Adobe Illustrator：パスを自動で単純化する：アンカーを減らす公式設定と、再現性との調整を説明します。
6. Inkscape：画像のトレース：単一スキャンと複数スキャンによるトレースの、現在の公式手順です。
7. PerfectVector：製品の事実情報：アップロードの準備、無料プレビュー、結果の取得について説明します。

---

PNGを変換し、プレビューを比較してください。元の輪郭と小さな細部を確認し、編集前にロックを解除してから、書き出したSVGを使用先のアプリで検証します。