ロゴがPNGで手元にある。サイトのヘッダーではきれいに見えるのに、誰かが大きいものを求める。バナー、印刷、Tシャツ。すると拡大したものはやわらかくギザギザになります。それがラスターファイルの天井です。固定されたピクセルの格子であり、拡大したときに見つけられる追加のディテールはありません。SVGにその天井はありません。ロゴを図形とパスとして保存するので、幅32ピクセルでも2メートルでも鮮明に描き直されます。
PNGロゴをSVGの形にするとは、それをトレースすることです。ピクセルを読み、縁をたどるベクターパスを描きます。フラットなロゴには、これがまさに正しいツールで、しかも手早いです。
なぜロゴはよくトレースできるのか
良いロゴはトレースの理想的な入力です。たいてい少数の単色を持ち、その間の境界がきれいで、やわらかなグラデーションや写真的な質感がありません。トレーサーはそういう画像をきれいに読みます。色の各ブロックを見つけ、その周りにぴったりのパスを描き、ほんの一握りの図形からなるSVGを生みます。小さなファイル、鮮明な縁、あとから完全に編集可能。
アイコン、シンプルなイラスト、線画、手描きのレタリングも、同じ理由で同じ幸せなくくりに入ります。フラットな色と明確な縁です。
手順
- 手元で一番きれいなPNGから始める。 高解像度で鮮明な元画像は、小さくぼやけたものよりよくトレースされます。ロゴに透過背景があるなら保ちましょう。トレースはそれを保てます。
- ロゴに合ったプリセットを選ぶ。 2〜3色のマークなら、フラット／ロゴが色数を少なく図形をシンプルに保ちます。より詳細なイラストには、詳細がより多くのパスを許します。純粋な線画やシルエットには、白黒が2階調に減らします。
- ビフォーアフターのプレビューを確認する。 トレースを元画像と比べます。縁がでこぼこに見えたり、ツールが余分な色を生み出したりしたら、別のプリセットを試しましょう。色が少ない方がたいていきれいで小さな結果になります。
- SVGをダウンロードし、必要ならベクター編集ソフトで開いて微調整します。
これは完全にブラウザ内で動くので、放り込んだロゴは決してアップロードされません。お使いの端末のキャンバスから読まれ、アカウントもなく、ページが読み込まれればオフラインで動きます。
トレース後に整えて色を変える
出力は名前付きのパスと塗りからなる普通のSVGなので、トレースが生んだものに縛られません。Illustrator、Inkscape、Figmaで開けば、1つの塗りを編集して領域全体の色を変え、正確なブランドのHEXを設定し、トレーサーが拾った余計な図形を削除し、パスを微調整できます。これが本当のご褒美です。ロゴが固定された写真であることをやめ、どんなサイズでも編集できるオブジェクトになります。
役立たないところ：写真
入力について正直になりましょう。これは写真ではなく図形をトレースします。写真、つまり顔写真、商品写真、風景を渡すと、それでもSVGを生みますが、ひどいものです。数千の微妙な色が積み重なった塊で近似され、ファイルは元のJPGをはるかに超えて膨らみ、塗り広げられたように見えます。連続階調のものは、ラスター形式のまま代わりに圧縮しましょう。そしてこれはロゴを何か新しいものに描き直すAIではありません。元のPNGがぼやけていたりノイズがあったりすれば、トレースはそれを受け継ぎます。きれいでフラットな少数色のロゴがきれいなSVGを生みます。それがちょうどいい落としどころです。