PNGをSVGに変換する
PNGからSVGへの変換が適している場合、透明PNGの輪郭がどのように処理されるか、きれいなベクター出力を得るための準備方法を説明します。
要点
- 透明な背景、明確な輪郭、少ない色を持つロゴやアイコンのPNGはSVG変換に適しています。
- 透明PNGでも、滑らかな輪郭やアンチエイリアスのピクセルから不要なパスが生成されることがあります。
- 変換後は自動最適化済みのSVGの輪郭、透明部分、ファイルサイズ、パス数を確認します。
- カテゴリー
- 変換
- 難易度
- 初級
- 読了時間
- 約6分
- 関連ツール
- Image to SVG
- 適している用途
- 透明なロゴ, アイコン, 単純なグラフィック
- 適さない用途
- 写真, スクリーンショット, 柔らかな影
はじめに
PNGは透明度と可逆圧縮に対応するラスター形式です。ロゴやアイコンに広く使われますが、PNGであるだけではSVGへの変換に適しているとは限りません。重要なのは、画像の内容を少数の明確な形で表現できるかどうかです。
このガイドでは、PNGの透明部分とアンチエイリアスがトレース結果に与える影響、適切な入力の選び方、変換後に確認すべき項目を説明します。
PNGのトレースはどのように動きますか？
トレーサーはPNGのピクセルを調べ、近い色や輪郭をまとめてSVGパスに変換します。透明な背景は背景を分離しやすくしますが、半透明の輪郭ピクセルまで自動的に単純になるわけではありません。
小さなPNGを拡大すると、輪郭には透明度の異なるピクセルが並んでいることがあります。トレース設定によっては、それぞれが小さな形として解釈され、パス数や色数が増えます。
透過がトレースに与える影響
PNGはピクセルごとのアルファ値で透明度を表現できます。曲線や斜めの輪郭には半透明のピクセルが多くあります。ラスターでは輪郭を滑らかにしますが、トレースでは追加の色の領域として残すか、近くの図形へまとめるか、除くかの判断が必要になります。
透過PNGでは次の領域を個別に確認します。
- 外側の輪郭にある薄い縁や孤立した断片
- 文字、アイコン、バッジの内側の空間
- 不透明な帯のようになる場合がある半透明の影
- 透明度の処理を単純化したときに消える小さな細部
透明な背景なら背景の矩形をトレースせずに済む場合がありますが、元のデザインの曲線やオブジェクト境界を復元するわけではありません。
どのPNGが適していますか？
| PNGの特徴 | 適性 | 確認すること |
|---|---|---|
| 単色ロゴ、透明背景 | 高い | 輪郭とブランドカラーが保たれているか |
| 限られた色のアイコン | 高い | 小さい表示でも形が明確か |
| 線画やステッカー | 中程度 | 細い線、影、内部ディテールが過剰なパスになっていないか |
| UIスクリーンショット | 低い | 文字とアンチエイリアスが大量のパスにならないか |
| 写真を保存したPNG | 低い | PNGという拡張子ではなく内容が写真であることを確認する |
実際の変換例: 透明なステッカーPNG
この例は2026年9月13日にSVGKITのColorモードで計測しました。透明背景は保たれましたが、食べ物の細かな輪郭と色の変化を表すために762個のパスが生成されました。
ディテールの多い食べ物ステッカー
透明背景のおかげで素材を分離しやすい一方、内部の色と細かな形によって構造は単純ではありません。単発のステッカーには使えても、UIで大量に繰り返す前には描画とサイズを確認します。
- 元ファイル
- 220,647 B
- SVG
- 106,949 B
- パス
- 762
計測日: · 設定: Color / Original
320ピクセルのプレビューでは、鍋の黒い輪郭、特に取っ手の周辺が元画像より不均一です。透明な背景は残りますが、輪郭まで同じではありません。固定の小さなサイズで表示するステッカーなら、ベクターの利点が明確で輪郭の変化を許容できる場合を除き、PNGを保つ方が適切です。
よくある失敗
小さすぎるPNGを入力にする
低解像度の階段状の輪郭は、そのままトレースされます。利用できるなら、より大きくきれいな入力を使います。
透明背景なら結果も単純だと考える
透明度は背景分離に役立ちますが、影や半透明の輪郭は多数の形を作ることがあります。
PNGという理由でスクリーンショットを変換する
スクリーンショットは文字、細線、多数の色を含みます。PNGでも内容はSVG向きではありません。
自動最適化だけで確認を終える
SVGKITはダウンロード前に自動最適化します。最終ファイルの輪郭と透明部分を確認してください。追加の最適化だけで不適切なトレースを修復することはできません。
ベストプラクティス
- 元のベクターファイルがある場合は、PNGのトレースより元データを優先します。
- 余白を切り取り、不要な影やノイズを減らします。
- 透明部分と輪郭を明るい背景・暗い背景の両方で確認します。
- 出力のファイルサイズとパス数を一緒に確認します。
- 小さいUIサイズで重要な形が残っているか確認します。
- 公開前に自動最適化済みのSVGを確認し、元のPNGも保管します。
実務での手順
- 1PNGの内容が写真ではなく形中心か確認します。
- 2可能なら余白、ノイズ、不要な影を整理します。
- 3Colorモードから開始し、必要な場合だけ単純なモードを試します。
- 4透明部分と輪郭を複数の背景色で確認します。
- 5サイズ、パス数、見た目を元のPNGと比較します。
- 6最適化後、PNGとSVGのどちらを公開するか決めます。
FAQ
すべてのPNGをSVGに変換できますか？
技術的にはトレースできますが、すべてが実用的なSVGになるわけではありません。写真やスクリーンショットはPNGのままの方が適切です。
PNGの透明部分はSVGでも透明になりますか？
通常は背景を分離できますが、半透明の影や輪郭は複雑な形になることがあります。複数の背景色で出力を確認してください。
PNGをSVGにすると必ず小さくなりますか？
いいえ。単純なロゴでは小さくなることがありますが、色とディテールが多い画像ではSVGの方が大きくなる場合があります。
きれいなPNGで試してみますか？
輪郭が明確で色数の少ないPNGを使い、透明部分とパス数を確認してください。
PNG to SVGを試す