SVG を GIF に変換

変換する前に知っておく価値があります。GIF には透過がありますが、それは色テーブルの 1 エントリーを「不可視」として指定できるという 1 種類だけです。ここで使われる符号化処理はそのエントリーを指定しないため、パレットを作って RGB の並びとして書き出し、ファイルが組み上がる頃にはアルファ情報の置き場所がなくなっています。

SVG から描画すると、何も描かれていない場所は透明なピクセルになりますが、パレットが作られる前にすべて何らかの色で塗りつぶされます。この背景色は既定で白です。透明な背景の上に描かれたロゴは、結果として白いカードに乗ったロゴになります。白いページの上では見えず、暗い背景の上ではよく見える、ということを送る前に確認してください。

このページの背景色の設定は、ほかの何より先に読み込まれます。塗り色はまずキャンバスに描かれ、そのあとに SVG の描画が一度で重ねられます。この順序のおかげで輪郭が汚れません。あとから塗ると、拡大縮小してから塗った場合と同様、曲線の縁に半透明のピクセルが残り、塗り色がそれを暗くにじませます。

GIF が最終的に置かれる場所に合わせて値を決めてください。白いページなら既定のままで構いません。色付きのパネルに置くなら、その 16 進値を入力すれば境目が消えます。置き場所が変わる可能性がある——今年は白で来年は暗い背景かもしれない——なら、SVG の側に viewBox 全体を覆う四角形を描き込んでおくほうが確実です。

SVG に大きさという概念はないため、変換は既定で幅 1,024 ピクセルを選び、高さは元の比率に従います。この既定は PNG や WebP には向いていますが、GIF が今なお求められる署名欄やアバター、掲示板のアイコンといった場面——だいたい 100 から 300 ピクセル程度——には大きすぎます。

スケールの設定を使ってください。0.2 に設定すれば同じ図が幅およそ 205 ピクセルで描画され、これらの用途に近い大きさになり、ファイルサイズもおおむね面積に応じて縮みます。150 ピクセルで足りる場面に 1,024 ピクセルの GIF を送ると、受け取った側のソフトが縮小することになり、たいてい仕上がりも良くありません。

SVG から来る図では、256 色という数字が示すほど厳しい縮小にはなりません。ベタ塗りと線はそれぞれ 1 色ずつで済み、アンチエイリアスが縁に沿って中間色を少し加える程度です。2 色の図なら合計でも数十色程度になります。

一方でグラデーションは 256 色を超えます。線形や放射状のグラデーションは広い範囲で何百もの値を生成するため、パレットに収まりきらず、量子化された結果は滑らかにではなく段階的に見えます。ドロップシャドウやぼかした縁、半透明の重なりも同様で、いずれも幅の広い値を生み出します。GIF を避けられないなら、小さく描画するほど段差は目立ちにくくなります。

SVG は SMIL 要素で動き、CSS アニメーションにも反応し、スクリプトも埋め込めます。GIF もアニメーションできる形式なので、両者がつながりそうに思えますが、そうはなりません。描画処理は SVG の初期状態を 1 枚の静止画として描き、符号化処理はその 1 フレームだけをファイルに書き込みます。

動くロゴは最初の姿勢のまま出てきます。動く GIF が必要な場合は、これとはまったく別の作業になります。アニメーションを実際に再生してフレームごとに取り込む処理が必要で、静止画の描画エンジンにはできません。

GIF は 1987 年以来、あらゆるソフトで読めてきました。要件を GIF と書いた人が求めているのはその一点だけです。メールクライアント、掲示板エンジン、社内ポータル、2000 年代半ば以前に書かれた業務ソフトはすべてこれを読め、指定した人はどれにも失敗しない答えを求めていました。

その要件の残りも読んでおいてください。GIF を指定するほど古い要件は、たいてい最大ピクセル数と最大バイト数も決めており、形式だけが制約だったことは稀です。一度ですべて満たすほうが、三度突き返されるより速く済みます。

妥協する前に一度試す価値はあります。ヘルプ本文で GIF と書きながら、検証コードでは PNG も受け付けているシステムは少なくありません。本文はコードより前に書かれ、コードは使っているライブラリーが読めるものすべてを受け付けているからです。通れば透過はそのまま保たれ、色の縮小も起きません。

GIF が本当に必要な場合は、既定値を見ずに塗り色を意図して選んでください。決めた結果としての塗り背景画像になり、送った相手全員に同じ見え方をします。それこそがその要件が最初に求めていたものです。

フォルダーごと置いてください。各 SVG は同じスケールで描画・符号化され、まとめて 1 個の ZIP として戻ってきます。パレットは画像ごとに作られるため、同じブランドカラーでもファイルによってわずかに違う位置のインデックスになることがあります。使用上は問題ありませんが、ファイルどうしがバイト単位で一致すると期待しないでください。

設定もファイルごとに保持されるため、背景色は一括ではなく行ごとに選ぶことになります。1 個のテンプレートに使うセットなら、始める前に同じ値をそろえておく価値があります。逆に、2 種類の背景向けの素材が混ざったフォルダーを 2 回に分けずに済むのは利点です。