JXL を SVG に変換

SVG を画素に描画する処理は決定的です。ファイルに形が書かれていて、描画エンジンがそれを描くだけです。逆方向にはそもそもファイルの中に形が存在しません。JPEG XL は色の格子であり、SVG が必要とする曲線や角、輪郭はすべて、色の変わり目から推測しなければなりません。

この推測がトレースと呼ばれるもので、この組み合わせがサイトの他のどのペアとも違う説明のされ方をする理由です。出力は入力そのものではありません。結果はもとの絵柄にどれだけ似ているかが元データ次第で変わる新しい絵で、それが次の 2 つの節の主題であり、このページがこの形で存在する理由です。

できあがるのは容量の大きい、出来の悪い写真です。トレース処理は似た色の領域を見つけてその周りに輪郭線を引く仕組みなので、平坦な領域が存在している必要があります。写真にはそれがありません。あらゆる方向に連続した階調があるだけなので、アルゴリズムは色を減色して平坦な領域を作り出し、見た目としてはポスタリゼーションになります。

これは機能が公開されたあとの推測ではなく、事前に測定された結果です。写真は元データのおよそ 4 倍の容量になり、見るからにポスタリゼーションが起きました。グラデーションも同じ理由で帯状になりました。グラデーションこそ、アルゴリズムが探している平坦な領域が存在しない状態そのものだからです。JPEG XL は用途として写真を挙げている形式なので、このページにたどり着く人の多くはまさにそういうファイルを持っており、正直な助言は変換しないことです。

平坦な絵柄で、しかも多くの人が思うよりずっとうまくいきます。ロゴは忠実に往復します。テストでは 6 KB の元データが 16 KB の SVG になり、鋭い輪郭も正しい色も角の丸みもそのまま残り、看板サイズまで拡大してもぼやけませんでした。アイコン、単色のマーク、平坦なイラスト、スキャンした線画も同じ範疇に入ります。

共通しているのは、これらの画像が本当にトレーサーの探しているもの——1 つの色の領域と、その間のはっきりした境界——を持っているということです。できあがる SVG は元の画像よりバイト数では大きくなりますが、印刷に耐える大きさのラスター画像よりはるかに小さくなります。これがこの形式が存在する理由そのものの取引です。この変換が本領を発揮するのはこの場面で、最初に試すべき唯一の場面でもあります。

文字を含むスクリーンショットは、元データのおよそ 40 倍の SVG になりました。原因はアンチエイリアスです。すべての文字が中間色の縁取りで描かれており、その縁取りのひとつひとつが独自の小さなパスの集まりになります。それが 1 ページ分の文字で掛け合わされると、ファイルは膨れ上がるのに、置き換えた画素より見た目は悪くなります。

JPEG XL の中身がほとんど文字なら、問われるべきはたいてい「その文字で何をしたいか」です。読んだり貼り付けたりしたいなら、文字認識のほうが正しい道具で、形ではなく文字そのものを返してくれます。ページの見た目を保ちたいなら、ラスター形式のほうがずっと小さい容量で保てます。文字をトレースして意味があるのはワードマーク——文字というより絵柄になった数文字だけ——の場合に限られ、その場合は 4 色となめらかなディテールから始めるのがよい設定です。

色数は、絵柄を何色の平坦な色に減らすかを決める設定で、他のすべてを左右します。4 色はロゴや単色のマークに合い、もっとも整った形ともっとも小さいファイルになります。8 色が既定で、たいていの平坦なイラストをカバーします。16 色は陰影をより忠実に追いますが容量が実際に増え、32 色は元の画像にもっとも近づきますが、はるかに大きなファイルになります。

色数を増やしたくなるのが人情ですが、間違った画像にそれをやると、出来の悪い結果を使い物にならない結果に変えてしまいます。写真に対して色数を増やすことは、写実性を増やすのではなく、作り出された領域とそれを記述するパスを増やすだけです。守るべき法則はこうです。元の画像に、トレースが隣と一緒にまとめてしまった特定の平坦な領域が見えるときだけ色数を増やしてください。減らす方向のほうが役に立つことが多いです。2 色のマークを 4 色でトレースすると、残りの 2 色分がその 2 色の間のアンチエイリアスされた縁だけでできていることがよくあります。4 色に落とすか、トレースする前に清潔な背景の上でマークを描き直せば、そうした輪郭の形を整えるのではなく取り除けます。

ディテールの設定は、パスがどれだけ画素に忠実に沿うかを決めます。「なめらか」はゆるいフィットを許し、16 ピクセル未満の形を捨てます。これによって、どの輪郭にもアンチエイリアスが残す粒が取り除かれます。「バランス」が既定で、両方のしきい値を半分にします。「シャープ」はピクセル格子に厳密に沿い、2 ピクセルまでの形を、粒も含めて保ちます。

トレース前に画像をぼかせば粒の数はさらに減らせますが、あえて行っていません。ロゴをトレースする唯一の理由である鋭い輪郭そのものを鈍らせてしまうからです。まずは「バランス」から始めてください。輪郭の周りに小さな断片が散らばるようなら「なめらか」に、セリフや細い罫線、マークの切れ込みといった本物の細かいディテールが失われているときだけ「シャープ」に移してください。

トレースの前に、画像は長辺が 1,600 ピクセルになるよう縮小されます。トレースのコストはファイルサイズではなく輪郭の数に比例して増えます。大きな写真はほぼどこにでも輪郭があるので、そのままにしておくと 1200 万画素の元データから数十秒かけて数メガバイトの SVG ができてしまい、避けたかったはずの結果より悪くなります。

ラスター変換とは違い、これは忠実さの損失ではありません。出力は解像度に依存しないので、1,600 ピクセル幅でトレースしたロゴも、4,000 ピクセル幅でトレースした同じロゴも、どのサイズで表示しても同じに描画されます。変わるのは、パスが元の画素格子にどれだけ密着しているかだけです。この縮小はブラウザーのフィルター付きスケーラーで行われ、最近傍法のループでは行われません。フィルターなしの縮小はすべての斜め線を階段状にエイリアシングしてしまい、トレーサーがそれを忠実に再現してしまうからです。

このページは画像を検査して、うまくトレースできるかを予測することはしません。色数からの推測はしょせん当てずっぽうで、本当の答えは少し待てば無料で手に入ります——トレースしてから、2 つのバイト数を比べればよいのです。インターフェースには両方の容量が表示されるので、確定させる前にどちらの結果になったかがわかります。

これは習慣にする価値のある確認です。SVG が元データと同じか小さいなら、ほぼ確実に本物の形が見つかったということです。SVG が何倍も大きいなら、形を作り出してしまったということで、正直な対応は設定を調整するのではなく結果を捨てることです。色数やディテールの組み合わせをどう変えても、写真は平坦な絵柄にはなりません。そもそも平坦な絵柄がそこになかったからです。

トレースがうまくいったときの本当のご褒美がこれです。JPEG XL は編集可能な形式ではありません。フィルターをかけたり切り抜いたり再符号化したりはできますが、マークを選択して色を変えることはできません。マークというもの自体が存在せず、そう見える画素があるだけだからです。SVG は形を記述するテキストファイルで、Illustrator や Inkscape、Figma はどれもオブジェクトとして開き、移動や色変更、削除ができます。

ロゴをトレースする理由が拡大のためだけであることはめったにありません。画像としてしか存在しない資産——スキャンしたレターヘッドにしか残っていない古いマーク、元ファイルを誰も保存しなかったアイコン——を、また手を入れられるものへ取り戻すためです。出力もテキストファイルなので、エディターで開いたり差分を取ったり、他のソースコードと同じようにバージョン管理下に置いたりできます。ブランドカラーが変わったときも塗りを検索置換で変えられます。元のベクターファイルがどこかにまだ残っているなら、それを探すほうが常にトレースより優れています。トレースは近似であり、元のファイルはそうではないからです。

トレースは元データのあらゆる欠点を引き継ぎます。JPEG XL が低解像度のコピーや、ロゴのスクリーンショット、非可逆な再保存を何度も経たものなら、トレーサーはやわらいだ輪郭や圧縮のノイズを忠実に形として再現し、結果は大まかには正しく見えても、大きなサイズでは細部が誤っています。

ブランドを担うもの——看板、印刷物、Web サイトのヘッダーなど——にはトレースは出発点であって納品物ではありません。トレース結果をテンプレートとして使い、誰かがベクターエディターの中でマークをきちんと描き直せば、なめらかな曲線と正しい幾何をもつファイルができます。この変換は取り組むための材料を得るのには優れていますが、そのまま出荷するものと取り違えるべきではありません。