PNG→SVGトレーサーとは？
PNG to SVG Tracerは、ラスター画像（PNG、JPG）をスケーラブルベクターグラフィックスに変換します。エッジ検出とパストレースを使用して、品質を損なうことなくどんなサイズにも拡大縮小できるSVGを生成します。ロゴ、アイコン、イラストに向いています。
よく使う用途向けに 5 種類のプリセット（ロゴ/フラット、アイコン、イラスト、線画スケッチ、写真）を用意しています。しきい値・スムージング・ディテール・色数・パス簡略化・ノイズ除去フィルターをすべてスライダーで露出させているので、エッジを残したままパス数だけ落とすところまで詰められます。反転トグルで暗背景の明るい絵柄に対応し、カラーレイヤー編集でノイズの多いレイヤーをダウンロード前に隠せます。フラットなマークなら 5 KB 以内に収まることがほとんどです。
使い方
- ベクター化したいPNGまたはJPG画像をアップロードします。
- しきい値、スムージング、ディテール設定を調整してトレース品質を制御します。
- SVGの結果をプレビューし、ベクターファイルをダウンロードします。
使用するタイミング
- 低解像度の PNG しか残っていない古い会社ロゴをベクター化したいとき。
- 16px と 256px のどちらでも崩れないアイコンをデザインシステム向けに整えるとき。
- 手描きのスケッチをスキャンして Figma や Illustrator で編集できるパスに変換するとき。
結果
デザイナーが200×200ピクセルのロゴPNGをアップロードすると、トレーサーがエッジを検出し、滑らかなベジェ曲線を持つシャープなSVGを生成します。看板サイズに拡大しても鮮明に表示されます。
よくある質問
- 写真から使える SVG を作れますか？
- 実用的ではありません。写真は連続階調なので、トレースすると数千本の重なり合うパスになり、ファイルが膨れたうえに斑点状になります。「写真」プリセットはあくまでポスタリゼーション風の表現用と考え、写真そのものは PNG/JPG のまま使うのが無難です。
- なぜ細かいパスが大量に出てくるのですか？
- 多くは元の PNG の輪郭にノイズやアンチエイリアスのにじみがあります。ノイズ除去を上げてトレース前に孤立した点を消し、Simplify を上げて近接アンカーをまとめ、Colors を下げて細かい階調の段差が別領域としてトレースされるのを防ぐと、たいてい大幅に減ります。
- しきい値とディテールはどう違いますか？
- しきい値は「どの画素を前景／背景にするか」の白黒判定です。ディテールはその判定後にパスがピクセルの縁にどれだけ忠実に追従するかを決めます。しきい値高+ディテール低できれいなシルエットに、しきい値低+ディテール高で質感まで拾えます。
- 元の色は残せますか？
- 残せます。Colors を 2 以上にすると、その色数で画像を量子化し、各領域が対応する塗りを持つ SVG パスになります。フラットなイラストなら 2 から 6 色がちょうど良い目安です。
- SVG のほうが元の PNG より小さくなりますか？
- ロゴやアイコンならほぼ確実に小さくなり、50 KB の PNG が 2-5 KB の SVG になることもあります。複雑なイラストでは SVG のほうが PNG より大きくなる場合もあり、その時はディテールを下げてパス数を絞ると改善します。