GIF を SVG に変換

古いロゴやアイコン素材が GIF のまま残っていて、それを拡大しても輪郭が崩れないベクター形式で使いたい、という場面でこの変換が使われます。

ただし SVG になるのは絵を「トレースし直した結果」であって、GIF の画素をそのままベクターの命令に置き換えるわけではありません。この違いは仕上がりに直接影響します。

この変換器が使っているのは輪郭を検出して塗りつぶし領域に変換するトレース処理です。もとの絵がどんな図形の組み合わせで作られていたかを知っているわけではなく、色の塊として画像を読み直しているにすぎません。

単純な平坦色のロゴであれば、この推測は元の形にかなり忠実に一致します。複雑な絵柄になるほど、トレースの結果は元の見た目からずれていきます。

GIF がアニメーションを持っていても、この変換で扱われるのは読み込み時に取得できる最初のコマだけです。SVG 自体もアニメーションを前提にした形式ではないため、動きのある GIF を渡しても静止した 1 枚の絵として処理されます。

トレースは既定で「バランス」というプリセットを使い、絵を 8 色に単純化してから輪郭を検出します。GIF はもともと最大 256 色のパレット画像なので、色数が多い GIF ほどこの単純化の影響を強く受けます。

結果として、グラデーションを含む絵は滑らかな階調ではなく、色の帯が重なったような見た目になります。

フラットな色で構成されたロゴは、6 KB の画像が 16 KB 程度の SVG になる程度で、ファイルサイズも実用的な範囲に収まります。

一方、文字を含むスクリーンショットのようなものをトレースすると、SVG が元の画像の 40 倍もの大きさになった例があります。写真をトレースした場合も、4 倍ほど大きくなったうえに、色の境目がポスター画のようにはっきり分かれた見た目になります。

この変換は `viewBox` 属性を必ず付けて SVG を書き出します。これがないと SVG は見かけ上ベクターでも、実質的にサイズが固定された画像と同じ扱いになってしまいます。

対応する名前空間の宣言も合わせて追加されるため、Illustrator や Inkscape のような編集ソフトでそのまま開けます。

複数の GIF を一度に置いても、順番に処理されて ZIP にまとめて返ってきます。アップロードは発生しませんが、1 回にまとめられるのは 100 ファイルまでです。

色数の多い複雑な絵柄が多く含まれる場合、トレースの処理に時間がかかることがあります。

単色の背景に少ない色数で描かれたロゴやアイコンには、この変換はよく機能します。線が少なく、色の境目がはっきりしている絵ほど、トレースの結果は元の形に近くなります。

写真やグラデーションを多用したイラスト、文字を含むスクリーンショットには向きません。そうした画像は、SVG ではなく PNG や WebP のような画像形式のまま扱うほうが、見た目も容量も安定します。