透明な入力から、透明な出力へ

PNGとWebPはアルファチャンネル（ピクセルごとの不透明度）を保存できますが、JPEGはできません。PNGやWebPをアップロードすると、トレースツールはアルファを読み取り、半分以上不透明なピクセルにだけ色を割り当てます。それ未満のピクセルはどの色にも属さず、パスも作られないので、切り抜かれたロゴの周りの何もない部分は、SVGでも何もないままです。出力される<svg>には背景の長方形がなく、置いた場所の下地がそのまま透けて見えます。

これはプレビューで確かめられます。結果のパネルはトレースしたパスを市松模様の上に描くので、透明な部分には白い四角ではなく市松模様が見えます。

半透明のピクセルは2段階で処理されます。まず、どのピクセルも半分の不透明度を境に、ある色に属するか属さないかが決まります。ロゴの柔らかいアンチエイリアスの縁はそこで切られ、輪郭は縁が半分覆われている位置に来ます。次に、各色はそのインクの不透明度を保ちます。この不透明度は柔らかい縁ではなく、図形の内側で測ります。ベタのインクは完全に不透明として書き出されるので、透明なロゴの上の黒い文字は、薄いグレーではなく黒のままです。元の画像で透けている色（柔らかいドロップシャドウや色付きのオーバーレイ）は、その不透明度がfill-opacityとして書き出されます。そのため影は、平坦で均一に半透明な1つの図形（たとえば不透明度54%）としてトレースされます。トレースで残せないのはフェードそのものです。影のかすかな外側（不透明度が半分未満の部分）は除かれ、できた図形はなだらかに薄れるのではなく、くっきりした輪郭と均一な不透明度になります。

市松模様の上の、柔らかいドロップシャドウ付きのカワウソのロゴ。市松模様の上のトレースしたSVG。薄い緑の背景の上の同じSVGでは、影が1つの半透明な図形として見える

柔らかいドロップシャドウを加えた、私たちのカワウソのロゴの透過PNG（左）と、そこからトレースしたSVGを市松模様の上（中央）と色の上（右）に置いたもの。背景の四角はなく、目の白い部分も残り、PNGではなだらかに薄れていた影は、くっきりした輪郭の不透明度60%の平坦な図形になりました。

背景を削除しても白い細部が残る理由

「背景を削除」は、画像の端から内側に向かって処理します。画像の縁に沿った帯を調べ、それぞれ帯の15%以上を占める1〜2色を選び、端から始めて、その色（とそれに近い色）でつながっているピクセルをすべて透明にします。さらに、その背景がアートワークと接する柔らかい縁（削除した部分のすぐ隣で、まだ背景色に近いピクセル）と、画像の端に接する小さな点も取り除きます。縁とつながっていないものには触れません。「A」の内側の白い部分、バッジの白いハイライト、2本のストライプの間の白いすき間などです。

これは意図的な設計です。暗いアートワークに囲まれた白いロゴの細部は、削除の後も残ります。ほかのツールで白いピクセルがすべて消えたことがあるなら、それは別の手法（カラーキー）によるもので、そのせいで他所の「背景を削除」はデザインに穴を開けてしまうことがあります。

逆に言えば、囲まれているはずの白い部分が縁とつながっていると、つまり輪郭にたった1ピクセルでもすき間があると、削除がそのすき間から入り込んで白い部分も消してしまいます。元の画像のすき間を直すか、背景の削除をオフにしたまま変換し、後でエディターで背景のパスを削除してください。

白い背景の上の白いアートワーク

トレースツールは同じ色を区別できません。白いキャンバスに書き出した白いアイコンは、トレースツールにとっては1つの白い領域です。結果は1つの白い長方形になるか、空の変換結果（「No vector paths could be produced」）になります。アップロードの前に次のように直してください。

  1. 画像編集ソフトで、アイコンをコントラストの強い単色の背景（濃いグレーや、アイコンに使われていない色）の上に置きます。
  2. 「背景を削除」をオンにしてアップロードします。背景は端とつながっているので消え、白いアイコンは残ります。
  3. アイコンに、透明のまま残すべき囲まれた透明部分がある場合は、本物のアルファを持つPNGとして書き出してください。そうすれば背景はまったく必要ありません。

結果のアルファを確認する

  • ダウンロードしたSVGをブラウザで開きます。透明な部分からページの背景（初期設定では白）が見えます。
  • 「SVGをPNGに変換」ツールでラスター化します。出力はRGBAで、透過が保たれます。
  • テキストエディターでファイルを開きます。元の画像に不透明な背景があり、背景の削除をオフにしていた場合を除いて、全面を覆う背景のパスはありません。

知っておくと役立つ関連の動作

  • 「線画／ステンシル」プリセットは、各ピクセルを白い紙の上に置いたときの明るさで判断します。暗い部分は黒いインクに、明るい部分は白い紙になり、透明な部分は透明のままです。そのため白いアートワークはインクではなく白い紙として出力され、透明な背景の上の暗い線の半透明な縁は、薄いにじみにならずに除かれます。
  • プレビューのPNGは透かし入りのラスター画像です。ベクターパスと本当の透過を持つのは、ロックを解除したSVGだけです。