PNG → SVG
☞ すべてブラウザ内で処理 — アップロードは一切ありませんここに PNG をドロップ
またはクリックして選択 — PNG のみ
変換前と変換後
処理を軽くするため、トレース前に画像を 2000px まで縮小しました。
PNG → SVG
フラットな PNG — ロゴ、アイコン、線画 — を、どんな大きさでも鮮明な本物のベクターパスに変えます。
またはクリックして選択 — PNG のみ
変換前と変換後
処理を軽くするため、トレース前に画像を 2000px まで縮小しました。
トレースにできること・できないこと
トレースツールはピクセルを少数の色にまとめ、領域ごとに輪郭を描きます。ロゴ・アイコン・線画にはまさにうってつけで、ベタ塗りの面がきれいな図形になり、看板サイズまで拡大してもぼやけません。
写真にはベタ塗りの領域がないため、同じ処理をすると色の帯が重なった状態になります。忠実な複製ではなく、ポスター効果です。狙って使うぶんにはよい表現ですが、写真そのものが必要なら PNG のままにしておきましょう。
3 ステップ
ファイルは端末内に留まります。
色数が少ないほど形はきれいになり、ファイルも小さくなります。
2 つのバージョンが並ぶので、結果を判断できます。
かんたん回答
連続階調にトレースをかけると、そうなるからです。画像はごく少数のフラットな色にまとめられ、それぞれが図形になるため、グラデーションは目に見える帯に変わります。トレースが向くのはロゴ・アイコン・線画で、写真はラスター画像のままにしておくほうが賢明です。
色数が多すぎるか、ディテールが高すぎます。この 2 つの組み合わせでパス数が何倍にもなります。まずは 8 色・ディテール中で試し、結果を SVG 最適化ツールに通してください。たいていさらに大きく削れます。
トレースは見えているピクセルにしか従えないため、およそ 20px 未満の文字では手がかりが足りません。元の文字がどこかにテキストとして残っているなら、トレースするよりベクター編集ソフトで組み直すほうが常に良い結果になります。
いいえ。決定論的な輪郭トレースです。同じ画像に同じ設定なら常に同じパスが得られ、ピクセルになかったものが作られることはありません。つまり、乱れたスキャンをきれいに整えたり解釈し直したりもしません。
いいえ。トレースはブラウザ内で実行され、画像が端末から出ることはありません。