BMP を SVG に変換 — 平らな絵をベクターに

このサイトの他の変換はどれも 1 つの絵をもう 1 つの形式でそのまま書き直します。これはできません。ビットマップの中に渡すべき形が存在しないからです。BMP は色の値の格子でしかなく、それを生んだロゴや文字や線の記録はどこにもありません。

だからトレーサーは推測します。似た色の領域の境目を見つけ、その周りに経路を描き、結果は元の絵に似た新しい絵になります。この推測こそがトレースの本質で、このページの大部分が設定ではなく「何がうまく推測されるか」に費やされている理由です。

平らな領域と本物の境界を持つもの——ロゴ、ロゴタイプ、アイコン、平らなイラスト、回路図、スキャンした線画。こうした素材はアルゴリズムが探しているものそのものでできているので、結果はどんな大きさに拡大しても崩れない少数のきれいな経路になります。

このサイトの実測では、平らなロゴは忠実に往復しました。硬い輪郭も正しい色も丸みも保たれ、6 KB の PNG が 16 KB の SVG になり、広告看板の大きさまで拡大できるようになりました。少し大きくなっても、看板サイズで印刷できるようになる価値のほうが上回ります。出力が入力の何倍にもなるなら、トレースはうまくいっておらず、それはたいてい写真かスクリーンショットです。

出力は塗りつぶされた経路の一覧なので、Inkscape、Illustrator、Figma はどれも開いて、図形を選択し、色を変え、動かし、削除できます。復元したロゴなら、4 色か 8 色でトレースし、縁に残った小さな点を消し、色をブランドの正確な値に合わせれば、たいてい作業は終わりです。

快適さは図形の数次第です。4 色でトレースしたきれいなマークは一握りの経路で、人が描いたもののように扱えます。トレースした写真は構造も名前もグループもない何千もの塊で、絵を描き直すのとほとんど変わらない手間になります。経路は何かに対応しているわけでもありません。「文字 A」という経路はなく、たまたま同じ色だった領域の輪郭があるだけです。

ポスター化します。写真には平らな領域がありません。空も顔も連続したグラデーションです。トレーサーは絵を先に少数の色へ縮めてから、その境目を輪郭にするので、必要な境目を自分で作り出します。

実測でも予想どおりの結果でした。写真は圧縮された原本の 4 倍の大きさになり、見た目にもポスター化していました。ここは珍しく良い面が何もない組み合わせです。写真を拡大できるようにしたいなら、これでは達成できません。手元にある最大サイズのピクセルをそのまま使ってください。

文字を含むスクリーンショットは PNG の 40 倍のサイズの SVG になりました。アンチエイリアシングされた文字はそれぞれわずかに違う灰色の塊で、その一つひとつが小さな経路になるので、1 段落の文章が何千もの図形になり、まとめて見るとわずかに間違った文字に見えます。

画面キャプチャは BMP としてよく届く素材の 1 つなので、これは強調しておく価値があります。目的が言葉を読むことなら BMP を TXT にする変換が読み取ります。目的がインターフェースの鮮明な画像なら、PNG のほうがビットマップよりもトレースよりもずっと小さく、ピクセルは正確に保たれます。

単色のマークや単純なロゴには 4 色、平らなイラストには既定の 8 色、本物の陰影があるなら 16 色、結果に明らかに足りないものがあるときだけ 32 色を使ってください。既定の 8 色は、ビットマップとして届く大半の絵にとって正しい出発点です。

数を上げる代償は素直な比例ではありません。色が 1 つ増えるたびに輪郭を描くべき領域の完全な集合がもう 1 つ増えるので、図形数もファイルサイズも急に増える一方、見た目の改善は頭打ちになります。8 色と 16 色を試すのに 20 秒しかかからず、それが理屈で考えるより確実です。

詳細設定は輪郭がピクセルにどれだけ密着するかを決めます。滑らか設定はゆるい当てはめを受け入れ、16 ピクセル未満の図形を捨て、あらゆる輪郭に残るアンチエイリアシングの点を取り除きます。鋭い設定は 2 ピクセルまでの図形を保ち、格子に密着します。標準設定はその中間で既定です。

滑らかはロゴに、鋭いは細い線が重要な技術図面に向くのが普通です。この設定が絶対にしないのは絵を先にぼかすことです。ぼかせば点の数は減りますが、ロゴをトレースする唯一の理由だった硬い輪郭そのものを失うので、ぼかし半径はどの設定でもゼロのままです。

トレースの負荷はファイルサイズではなく境目の数で増え、大きな写真はほぼどこにでも境目があります。放置すれば 1200 万画素の元データが数十秒かけて数メガバイトの SVG を生み、避けたかった結果より悪くなりかねません。

先に縮小してもラスター変換のような損失にはなりません。出力は解像度に依存しないので、幅 1,600 ピクセルでトレースしたロゴと 4,000 ピクセルでトレースした同じロゴは、どの大きさで表示しても同じに見えます。変わるのは経路が元のピクセル格子にどれだけ密着するかだけです。

トレースのあと、2 つのバイト数が比較され、どちらが増えたか画面に表示されます。この警告こそこの機能の誠実な核心です。トレースがうまくいくかどうかを予測する経験則はありませんが、答えは終わった直後に無料で分かります。

ただし元がビットマップのときは補正が必要です。1 ピクセルあたり 3 バイトの無圧縮データと比べれば、ほとんど何でも勝って見えます。トレースした写真は 36 MB の BMP より小さくなり得ますが、同じ写真の PNG より 4 倍大きく、見た目もずっと劣ることがあります。ビットマップも PNG に変換して、その数字と比べてください。それがトレースの本当のコストを反映する数字です。