アイコンをベクター化する方法

ここでの敵はアンチエイリアスです。32pxのアイコンでは、各斜め線に沿った柔らかいグレーのピクセルが画像の大きな割合を占め、エンジンには、それが実質の中間トーンではなくハードエッジのつもりだったと知る術がありません。512pxの版を渡せば、同じエッジは49個のきれいなピクセルに対する1 pxの遷移になり、形は明白です。

アイコンがモノクロなら、変換前に本当にモノクロにします。透過の上の純黒、あるいは白の上の純黒で、ソフトシャドウも控えめな内側のグローもない状態に。それらのエフェクトはそれぞれ、出力の中でシェイプになります。出力のシェイプは、見つけて削除しなければならないノードです。

見ているサイズでは、ほとんどどんなトレースもまともに見えます。重要なテストはノード数です。パスを開いてポイントを数えてください。よく描かれたアイコンには、曲線が本当に方向を変える場所にしかポイントがありません。角丸の正方形なら8個、円なら4個、シェブロンなら3か6個です。単純な形が60個で返ってきたのなら、エンジンはピクセルノイズを追いかけていたのであり、その形は描画が遅く、編集しづらく、拡大縮小すると微妙に違って見えます。

Lite以上では、ディテール設定がこれを直接制御します。ディテールを下げるとより積極的にマージが行われ、ノードは少なくきれいになります。角がちょうど柔らかくなり始めるところまで下げて、1段戻してください。Freeではレベルは自動選択で、影響を与える方法はソースの品質です。

アイコンセットにはグリッドがあります。通常は2 pxのセーフマージン付きの24×24、密度の高いインターフェースでは16×16です。トレースされたパスはピクセルがあった場所に落ちるため、そのグリッドに近いだけで、その上にはありません。小さい描画サイズでは、この「近さ」こそが、並んだアイコンの一つが隣より半ピクセル重く見える原因になります。

仕上がったパスをエディターで整数座標にスナップし、SVGのviewBoxを自分のグリッドに設定します。初回は面倒で、後は機械的な作業です。これが、「設計されて見える」アイコンセットと「変換されて見える」アイコンセットを分けます。

セット全体を作り直すなら、すべてを一括で変換して同一の設定を通し、そのうえでストロークの太さをセット全体で手動で揃えます。アイコンファミリーがファミリーに見えるのは、ストロークが揃っているからです。複数回のセッションに分けて個別にトレースしたセットは揃わず、その不一致は、どれ一つとしておかしく見えないアイコンがあっても目に付きます。

一括変換はProからで、一度に30ファイル扱えます。それ未満のプランでは1ファイルずつの変換になりますが、20個のセットなら数分のクリックで済む話で、妨げにはなりません。