WebPをSVGに変換する

はじめに

WebPとSVGは、どちらもWebで使われますが役割は異なります。WebPは写真や複雑な画像を効率よく圧縮するラスター形式です。SVGは形、パス、テキストなどをマークアップで表すベクター形式です。

WebPをSVGに変換する価値があるのは、元の内容がロゴ、アイコン、図、単純なイラストのように形中心である場合です。WebPという拡張子だけを理由に変換する必要はありません。

WebPからSVGへ変換するとよい場合

• -元のベクターファイルがなく、単純なWebP書き出しだけが残っている
• -色数が少なく、輪郭が明確である
• -複数サイズで鮮明に表示する必要がある
• -CSSでの色変更やインライン制御が必要である

実際の変換例: 単純なWebPアイコン

この円形アイコンは形が単純ですが、滑らかな輪郭のピクセルを表現するため22個のパスが生成されました。ファイルサイズはわずかに小さくなりましたが、元のWebPも十分に小さいため、変換の価値はスタイル変更や拡大の必要性によって決まります。

元のWebP

SVGKITの出力

入力

4,188バイト

出力

3,003バイト

パス

22個

処理時間

約0.1秒

よくある失敗

WebPという形式自体を問題と考える

WebPはWeb配信に適した形式です。目的を満たしているなら、SVGへ変換する必要はありません。

最適化済みのWebP写真をSVGへ置き換える

写真はラスター圧縮の方が効率的です。トレースすると構造が大きくなり、細部も失われます。

SVGは常に鮮明で高速だと考える

SVGは拡大に強い一方、パスが多すぎると描画コストが増えます。鮮明さと効率は入力の構造で決まります。

ベストプラクティス

• -まずWebPが現在の用途を満たしているか確認します。
• -元のSVGやデザインファイルがないか探します。
• -写真と複雑なイラストはWebPのままにします。
• -変換する場合はサイズ、パス数、輪郭を比較します。
• -SVGを実際の表示サイズと背景色で確認します。
• -公開前に最適化します。

実務での手順

1. 1
   WebPの内容を写真系か形中心かに分類します。
2. 2
   SVGへ変換する具体的な理由を確認します。
3. 3
   元のベクターデータがないか探します。
4. 4
   変換し、サイズとパス数を記録します。
5. 5
   WebPとSVGを実際の表示サイズで比較します。
6. 6
   最も単純に要件を満たす形式を公開します。

FAQ

WebPをSVGに変換できますか？

はい。ただし実用的な結果になりやすいのは、単純なロゴやアイコンなど形中心のWebPです。

パフォーマンスではSVGがWebPより優れていますか？

一律には言えません。転送サイズ、パス数、描画回数、キャッシュ、表示内容を実際のページで比較します。

WebP写真をSVGにすべきですか？

通常はしません。写真にはWebPまたはJPGの方が適しています。