SVGをWebPに変換

WebPは、SVGを受け付けないWebページ、アプリ、ストアで使えるコンパクトなラスター形式です。一部のビルダーのアプリアイコン、ECの商品、SNSのプレビュー、メールなどがそうです。この変換ツールは、SVGを選んだ正確なピクセルサイズで描画するので、2倍や4倍でも曲線や文字がくっきり保たれ、透明度を保ったままWebPとして保存します。ロゴやアイコンはべた塗りとくっきりした縁が多いため、可逆モードが既定で、細部の多いイラストには非可逆が向いています。

使い方

1. .svgファイルをドロップするか、SVGコードを貼り付けます。
2. サイズを選びます。1倍、2倍、4倍、倍率を指定、または正確な幅です。
3. 背景は透明のままにするか、色を選びます。
4. ロゴとアイコンは可逆のままにし、イラストなら画質を設定して、ダウンロードします。

計算式

出力幅 ＝ SVGの幅 × 倍率（または指定した正確な幅）、高さ ＝ 幅 × SVGの高さ ÷ SVGの幅。可逆WebP（VP8L）はすべてのピクセルを保ち、非可逆（VP8）は画質qを使います。

SVGのサイズはwidthとheight（CSS単位、1インチ96 px）またはviewBoxから取得し、ベクターは小さなビットマップを拡大するのではなく、出力サイズで直接レンダリングされます。WebPは1辺に最大16,383 pxまで許容します。SVG画像の中では、URLで参照された画像・フォント・スタイルシートは読み込まれないため、埋め込むか、文字をアウトライン化してください。

計算例

viewBox="0 0 24 24"だけでwidthとheightがないアイコンは24 × 24 pxとして扱われ、4倍では96 × 96 pxのWebPに、正確な幅512では512 × 512 pxになります。120 × 80のテスト用SVGを2倍にすると240 × 160 pxです。