PNGをSVGに変換する

はじめに

PNGは透明度と可逆圧縮に対応するラスター形式です。ロゴやアイコンに広く使われますが、PNGであるだけではSVGへの変換に適しているとは限りません。重要なのは、画像の内容を少数の明確な形で表現できるかどうかです。

このガイドでは、PNGの透明部分とアンチエイリアスがトレース結果に与える影響、適切な入力の選び方、変換後に確認すべき項目を説明します。

PNGのトレースはどのように動きますか？

トレーサーはPNGのピクセルを調べ、近い色や輪郭をまとめてSVGパスに変換します。透明な背景は背景を分離しやすくしますが、半透明の輪郭ピクセルまで自動的に単純になるわけではありません。

小さなPNGを拡大すると、輪郭には透明度の異なるピクセルが並んでいることがあります。トレース設定によっては、それぞれが小さな形として解釈され、パス数や色数が増えます。

どのPNGが適していますか？

実際の変換例: 透明なステッカーPNG

この例は2026年7月26日にSVGKITのColorモードで計測しました。透明背景は保たれましたが、食べ物の細かな輪郭と色の変化を表すために594個のパスが生成されました。

元のPNG

SVGKITの出力

入力

220,647バイト

出力

98,014バイト

パス

594個

処理時間

約0.4秒

ファイルは小さくなりましたが、594個というパス数は無視できません。サイズ削減だけでなく、使用回数と表示環境も含めて判断します。

よくある失敗

小さすぎるPNGを入力にする

低解像度の階段状の輪郭は、そのままトレースされます。利用できるなら、より大きくきれいな入力を使います。

透明背景なら結果も単純だと考える

透明度は背景分離に役立ちますが、影や半透明の輪郭は多数の形を作ることがあります。

PNGという理由でスクリーンショットを変換する

スクリーンショットは文字、細線、多数の色を含みます。PNGでも内容はSVG向きではありません。

変換後の最適化を省く

生成SVGには不要な精度やメタデータが残ることがあります。視覚確認後に最適化します。

ベストプラクティス

• -元のベクターファイルがある場合は、PNGのトレースより元データを優先します。
• -余白を切り取り、不要な影やノイズを減らします。
• -透明部分と輪郭を明るい背景・暗い背景の両方で確認します。
• -出力のファイルサイズとパス数を一緒に確認します。
• -小さいUIサイズで重要な形が残っているか確認します。
• -公開前にSVGを最適化し、元のPNGも保管します。

実務での手順

1. 1
   PNGの内容が写真ではなく形中心か確認します。
2. 2
   可能なら余白、ノイズ、不要な影を整理します。
3. 3
   Colorモードから開始し、必要な場合だけ単純なモードを試します。
4. 4
   透明部分と輪郭を複数の背景色で確認します。
5. 5
   サイズ、パス数、見た目を元のPNGと比較します。
6. 6
   最適化後、PNGとSVGのどちらを公開するか決めます。

FAQ

すべてのPNGをSVGに変換できますか？

技術的にはトレースできますが、すべてが実用的なSVGになるわけではありません。写真やスクリーンショットはPNGのままの方が適切です。

PNGの透明部分はSVGでも透明になりますか？

通常は背景を分離できますが、半透明の影や輪郭は複雑な形になることがあります。複数の背景色で出力を確認してください。

PNGをSVGにすると必ず小さくなりますか？

いいえ。単純なロゴでは小さくなることがありますが、色とディテールが多い画像ではSVGの方が大きくなる場合があります。