SVGをAVIFに変換

いいえ。変換はWebAssemblyによってブラウザ内で完結するため、ファイルがお使いの端末の外に出ることは一切ありません。サーバーを介さない仕組みなので、ページを一度読み込めばオフラインでも動作し、ファイルサイズの制限も端末のメモリ以外にはありません。

SVGはベクター形式のため決まったピクセル数を持たず、出力解像度はご自身で選べます。倍率はSVGが宣言しているサイズに掛かる係数で、100×100のアイコンを3倍で書き出すと300×300の画像になります。ベクターから直接描画されるので、どの倍率でも輪郭は完全にシャープなままです。後から拡大するのではなく、用途に必要なサイズを最初から指定してください。

行き先がウェブで、バイト数が問題になるときです。アイコンセットのサムネイル、ソーシャルカード、SVGを弾くプラットフォームのプレビューなどが典型です。輪郭の完璧さを何より優先するならPNGが今も最も安全ですが、ウェブ向けであればAVIFはたいていPNGの数分の一のサイズで済みます。

残ります。AVIFはフルアルファに対応しているので、SVGで塗られていない領域はアンチエイリアスの縁まで含めてきちんと透明のままです。ロゴやアイコンをどんな背景に置いても、白い縁取りは出ません。

自分のサイトにはSVGを置いてください。どこまでも鮮明で、たいてい小さく、CSSでスタイルも当てられます。AVIFラスターの出番はベクターを拒む場所 — ソーシャルのプレビューカード、マーケットプレイス、バッジ表示、メールなどです。つまり二者択一ではなく、SVGを正本に、行き先ごとのサイズでAVIFコピーを書き出す運用が正解です。

髪の毛のような細線と小さな文字が主体の作品です。非可逆圧縮はそこから先に柔らかくするため、品質70でも見える場合があります。SVGからPNGならすべての輪郭が数学的に鮮明なまま残り、フラットな色の単純なアイコンならAVIFとの容量差もごくわずかです。作品が大きくグラデーション豊かになるほど、AVIFが引き離します。