AVIF を SVG に変換 — ロゴをベクターに戻す

AVIF 系のページの中で唯一、手元のファイルによって挑戦する価値があるかどうかが決まるのがこの変換です。トレースは似た色の領域どうしの境目を探し、その周りに輪郭線を描きます。ロゴやアプリアイコン、バッジ、スキャンしたペン画、平らなチャートはそうした境目に満ちていて、きれいにトレースできます。

写真は違います。写真のあらゆる領域はグラデーションで、探すべき境目がないので、トレーサーは先に絵を色の帯へ平坦化してから境目を作ります。結果は何千もの経路から組み立てられたポスター化コピーで、その経路の輪郭は被写体には存在しません。写真なら PNG か TIFF に変換してピクセルを保ってください。

AVIF はウェブページを軽くするために存在し、ウェブページを重くする絵は写真です。サイトはヒーロー画像や商品写真、記事の見出し画像にこれを使うので、出回っている典型的な AVIF はトレースが最も苦手とする素材です。ブラウザーが受け入れると答えたときにサーバーが渡す形式でもあるので、訪問者はそれを選んだ覚えがなく、元がどんな絵だったのかを知らないこともあります。

例外がこのページの存在理由です。ビルドパイプラインはディレクトリ内のすべての素材——ロゴやアイコンも含め——を一括変換するので、渡された成果物の中に、写真用の配信形式に閉じ込められた平らなマークが混ざっていることがあります。そのファイルは美しくトレースでき、ベクターに戻すことは正真正銘の復元です。

このサイトの他のすべての組は、1 つの絵の表現をもう 1 つの表現に書き換えます。これは絵を読んで、それに似た新しい絵を描きます。SVG の中に AVIF から変わらずに残ったものは 1 ピクセルもありません。

ですから出力は信じるものではなく、見るものです。TIFF や BMP への変換はピクセルがそのまま渡るので正しいと仮定できますが、トレースはロゴの見事な復元にも使い物にならない近似にもなり得て、見分ける方法は開いて確かめることだけです。実際に使うサイズで見てください。トレースの失敗はサムネイルでは見えず、バナーサイズで初めて明らかになります。確認するまで AVIF は残しておいてください。

4 色は単色のマークや 2 色のロゴに、8 色——既定値——は平らなイラストの大半に合います。16 色と 32 色は陰影のある絵に向きますが、経路の数もそれに応じて増えます。

数を増やす直感はたいてい外れます。色の帯が増えるたびに下の層の上に輪郭がもう 1 層積み重なるので、もともと 5 色しかなかった絵に 32 色を指定すると、大きくて開くのが遅く、忠実さは変わらないファイルになります。増えた帯の多くは、AVIF の非可逆圧縮がいちばん不正確になる各図形の縁のにじみに費やされ、絵ではなく圧縮の跡を描いてしまいます。まず 4 か 8 で試し、見て、足りないものが確認できたときだけ上げてください。

詳細設定は、輪郭がピクセルの格子にどれだけ密着するかを決めます。滑らか設定は曲線を丸め、いちばん小さな点を無視します。標準設定が既定で、鋭い設定は元のピクセルの階段状の形をそのままベクターの階段として残します。

どれが正しいかは AVIF がどう作られたかによります。非可逆圧縮を経た素材は硬い輪郭の周りにかすかなブロックノイズを持ち、鋭い設定はその劣化まで忠実に恒久的な経路として刻んでしまいます。滑らか設定はそれをわずかな本物の細部と一緒に捨てます。ウェブサイトから保存したものなら、たいてい滑らかにする方が良い取引です。可逆で書かれた AVIF や、ピクセル格子そのものが絵であるインターフェースのスクリーンショットのような、汚れのない元データには鋭い設定が向きます。

AVIF はアルファチャンネルを完全に持てますが、SVG には背景という概念がありません。切り抜かれたマークは切り抜かれたまま残ります。透明だった領域はどの経路も覆わず、SVG を置いた場所の色がそのまま透けて見えます。

半透明のピクセルは扱いにくい部分です。曲線に沿ったアンチエイリアシングは部分的に透明なピクセルの帯で、平らな色で作業するトレーサーはそれぞれを図形の内か外かのどちらかに決めなければなりません。ですから縁は元よりわずかに硬く戻り、看板サイズでは見えず、元の描画サイズではときどき見えます。本物の柔らかい影やフェードがあった場合は、同心円状の平らな帯として現れ、色数を 4 まで落とさないと不自然に見えます。

AVIF が 4 万ピクセルとして保存していたロゴが、30 個の経路命令として出てくることがあります。SVG はそのとき元の何分の 1 かのサイズになり、どんな大きさでも鮮明です。これがこのページが想定する素材で起きる良い例です。

悪い例は逆方向へ大きく振れます。SVG は XML なので、すべての図形が座標を数字で書いた読める文字列として綴られ、トレースされた写真はその数字を何千も並べた文書になります。それだけの図形を説明する文章は、写真を圧縮するために作られた符号化方式よりはるかに多くの容量を取り、その差は 1 桁に及ぶことも珍しくありません。トレース完了後にこの比較は自動で行われ、ダウンロードする前に結果が表示されます。

Inkscape、Illustrator、Figma で開け、どの経路も選択して色を変えられます。ただし構造化されていません。描かれたロゴは円、ロゴタイプ、背景をそれぞれ名前の付いたオブジェクトとして持ちますが、トレースしたものはたまたまそう見える色の領域の積み重ねです。

ですから拡大や大判印刷、切削、一括での色変更には向き、文字の一部を編集したりロゴ内の 1 要素を調整したりするのは苦手です。文字はいちばん分かりやすい例です。トレースされたロゴタイプには文字はまったく含まれず、文字の形をした輪郭があるだけなので、フォントを変えたり字間を詰めたり誤字を直したりできません。元のファイルを作った人がまだ持っているなら、メール 1 通のほうがこのページのどんな設定より価値があります。

AVIF が自分が管理するサイトから来たものなら、それを作ったビルドパイプラインは何かから始まっていて、それはたいてい SVG かエディタのファイルです。それを取り戻す方が費用も損失もありません。

目的が大判印刷であり、編集可能なファイルではないなら、そもそもトレースは不要かもしれません。AVIF は最大 65,536 ピクセルまで持てるので、程よい解像度の元データはすでにポスターに十分な大きさであることが多く、TIFF や PNG への単純な変換で絵をそのまま保てます。判断基準はファイルの用途です。作品を描き直したり無制限に拡大したり機械で切ったりする必要があるならトレース、既知のサイズで一度印刷するだけならトレースは不要です。

アイコンの入ったフォルダーを置けば、それぞれが同じ設定で順にトレースされ、まとめて ZIP で返ります。パイプラインで一括 AVIF 化されたアセット一式には向いていますが、注意点が 1 つあります。設定はすべてのファイルに等しく適用されるので、平らなアイコンと写真的なヘッダー画像が混ざったディレクトリは、良いベクターと使い物にならないベクターが同じアーカイブに入ることになります。

すべてあなたの処理能力で動くので、アップロードはなく、待ち行列も、登録も、1 日の上限もありません。設定を変えて数秒で再トレースできるのも重要です。最初の結果が採用するものであることは、このページではまずありません。