SVG → WebP 変換とは?
このツールは SVG(ベクター)を WebP のビットマップにラスタライズします。SVG は数式のパスで表され無限に拡大できるので、先に出力サイズを選べばどんな解像度でも鮮明です。処理はすべてブラウザ内で行われ、アップロードしません。WebP は Google による最新の Web フォーマットで、透過と高い圧縮率の両方に対応し、通常 JPG や PNG より 25〜35% 小さくなります。サイト高速化に最適ですが、一部の古いソフトでは非対応の場合があります。
使い方
- SVG ファイルを選ぶかドロップします(複数可)。
- 出力幅を選びます(高さは縦横比から自動計算)。
- 「ダウンロード」で WebP を保存。複数ファイルは zip でまとめられます。
なぜ先にサイズを選ぶのか
SVG 自体には固定のピクセルがないため、WebP のようなラスター形式へ変換するときは「何ピクセルで描くか」を決める必要があります。アイコンにありがちな内蔵の小さいサイズ(24×24 など)のまま変換すると、小さくぼやけた結果になります。先に大きめの幅を選んでからラスタライズすることで鮮明な高解像度になります——「svg to webp 高画質」に本当に必要なのはこれです。
SVG のほうが小さく鮮明なのに、なぜ WebP に?
もっともな疑問です——送り先が SVG を受け付けるなら、変換は不要なことが多いです。SVG はたいてい小さく、無限に拡大してもぼやけません。WebP に変換するのは、ほぼ送り先が SVG を拒否するからです。
- 多くのSNS・ECサイト・コメント欄・古い CMS は(セキュリティを理由に).svg のアップロードを禁じつつ、WebP は受け付けます。
- SVG が外部フォントやフィルターに依存していると、別環境で表示が崩れることがあります。WebP にラスタライズすれば見た目を確定でき、見たままを渡せます。
WebP の利点は透明を保ちつつ小さいこと。SVG をラスタライズするときの第一候補です。WebP を表示できない非常に古い環境のときだけ PNG に戻します。SVG→PNG と同様、出力サイズは先に決めましょう——ラスタライズ後は拡大できません。
3 つで最小 —— ではなぜ既定にならないのか
実測ではこれが最も安い出口です。574 B → 6.6 KB(+1082%)。JPG は 13.2 KB、PNG は 17.9 KB —— WebP は PNG の 3 分の 1 強にすぎず、しかも透過も同時に保ちます(JPG にはできません)。では、なぜ常にこれを選ばないのか。ここでの唯一の実質的な変数が互換性だからです。WebP は Safari 14(2020)より前で非対応で、一部のデスクトップソフト、CMS のアップロード欄、メールクライアントは今日でも受け付けません。実務的な判定法:表示される場所を自分で管理できますか?自分のサイト → WebP を使い、対象が広ければ <picture> でフォールバックを添える。誰かに送る、管理外のシステムに貼る、あるいは不明 → PNG はずっと大きいが、拒む相手はいません。なお +1082% にも注目してください。最も安い出口でもラスター化は 10 倍以上の代価であり、だからこそ元の SVG は残さなければなりません。