WebP を SVG に変換

このページに来る WebP は、ほとんどの場合ウェブサイトから保存したものです。WebP を配信しているサイトの多くは、その裏に本物のベクター画像を持っています。ドメイン直下の favicon.svg、ページのソースの中の「.svg」という文字列、読み込み時のネットワーク欄。この3か所を確認するだけで見つかることがあります。

ロゴがインラインの SVG としてHTMLの中に埋め込まれているサイトは少なくありません。もし見つかれば、それは本物の輪郭と文字を持つ本来のデータであり、トレースによる再構成よりも確実に優れています。このページは、それが見つからなかった場合のためのものです。

WebP には静止画とアニメーションという、拡張子を共有するだけの2つの形式があります。ここで使われているデコーダーは静止画専用で、アニメーションのデータを扱う仕組みを持っていません。

そのためアニメーションのWebPは、最初の1コマだけ処理されるのではなく、読み込みそのものが拒否されます。動きが必要であれば WebP から GIF や MP4 への変換で対応できます。1コマだけをトレースしたい場合は、ブラウザーで再生して止め、その瞬間をスクリーンショットしてから、それをトレースしてください。

WebP は可逆にも非可逆にも保存でき、拡張子だけではどちらか判別できません。可逆で保存された WebP はPNGと同じように、デザイナーが描いた輪郭そのものが残っていて、きれいにトレースできます。非可逆で保存されたWebPは、JPEGと同じように平坦な部分がなめらかにされ、硬い境界に波打つようなノイズが入り、それがトレース結果にも輪郭のように現れます。

このノイズは、細部を平滑化する設定を上げたり、パレットの色数を減らしたりすることである程度抑えられますが、元の輪郭を完全に取り戻すことはできません。同じ画像がPNGとしても配信されている場合は、そちらをトレースするほうが確実です。

サイトはレイアウトに合わせた大きさで画像を配信するため、ヘッダーのロゴが幅240〜320ピクセル程度で配信されていることは珍しくありません。トレーサーが輪郭を合わせられる情報は、その画素数ぶんしかありません。

角が丸まったり細い線が揺れたりするのはこのためで、設定を変えても解決しません。URLのパラメーターでより大きな幅を要求してみる、@2xや@3xのファイルを探す、ブランド用ページで配布されているベクター素材を確認するといった方法のほうが有効です。

単色または2色のマークなら4色、フラットなイラストや数色の塗り分けなら8色を目安にしてください。8色が既定値で、ウェブから保存した多くの素材にちょうど合います。

非可逆で保存されたWebPでは、色数を増やすほど圧縮によるノイズを拾いやすくなります。まず少ない色数から試し、それでロゴが破綻しないなら、そのほうがファイルも小さく、後で整えるパスの数も少なくて済みます。

WebP はアルファチャンネルを持ち、トレーサーはそれを読み取ります。透明だった部分は不透明度ゼロのパスとして書き出され、絵柄はその上に重なります。この見えないパスは実際にファイルの中に存在するので、Inkscapeなどで開いたら最初に削除するとよいでしょう。

グループもレイヤー名もテキスト要素もグラデーションもなく、塗りと同じ色の細い輪郭線を持つパスの積み重ねが出力されます。文字を含むロゴであれば、文字は文字ではなく形として書き出されるため、元のフォントで打ち直すことはできません。

スライドや大判の印刷、カッティング用途、あるいは仮の表示としては十分ですが、ブランド資産として使うには不十分です。近くで見ればトレースだとわかります。細部まで再現するなら、多くのロゴは幾何学的な図形と書体の組み合わせなので、良いトレース結果を下絵にして描き直すほうが速いことがよくあります。

自分のサイトの素材を取り戻す、あるいはサポートが終わった制作会社が作った自社のロゴを復元する、という用途であれば問題になりません。

一方で、他社のブランド資産をウェブサイトから再構築するのは別の話で、トレースしたからといって権利が変わるわけではありません。この変換はブラウザーの中で完結するので、素材そのものが外部のサーバーに残ることはありません。