WebPをSVGに変換する
WebPの維持、トレース、単純な図形の描き直しを、実測ファイルと輪郭・編集要件から比較します。
要点
- 既存ファイルの維持、輪郭の復元、意図した図形の直接作成から選びます。
- 計測したトレースは22パス、143バイトの描き直しは円1個ですが、見た目を意図的に変えています。
- 可逆圧縮のピクセルにも元の編集可能なベクターオブジェクトは含まれません。
- カテゴリー
- 変換
- 難易度
- 初級
- 読了時間
- 約7分
- 関連ツール
- Image to SVG
- 適している用途
- 単純なWebPアイコン, ロゴの書き出し画像, 形中心のグラフィック
- 適さない用途
- 写真, 製品画像, 複雑なグラデーション
はじめに
すでにWebサイトで使えているWebPを、必ずSVGに置き換える必要はありません。このガイドでは、拡張子ではなく、置き換えによって配信や編集の問題を解決できるかを判断します。
選択肢は、WebPを残す、ピクセルをトレースする、単純な図形として描き直す、の3つです。描き直しはデザイン上の判断であり、可逆変換ではありません。ピクセルと図形の基本的な違いは、関連ドキュメントのRaster vs Vectorで確認できます。
トレース前に書き出しの性質を確認する
WebPは非可逆・可逆圧縮、透過、アニメーションに対応しています。拡張子だけでは、どの機能を使った書き出しかは分かりません。形式の機能はGoogleのWebP概要に説明されています。
- 非可逆圧縮: 輪郭を拡大し、小さな色の変化を確認します。それらが別々の領域としてトレースされる場合があります。先にPNGへ保存しても、失われた情報は戻りません。
- 可逆圧縮: 保持するのは保存されたピクセルであり、元のベクターオブジェクトではありません。アンチエイリアスのピクセルも解釈の対象になります。
- 透過: 明るい背景と暗い背景の両方で確認します。薄い縁はSVGの描画ではなく、元画像のピクセルに含まれていることがあります。
- アニメーション: 静止画のトレースはアニメーション変換ではありません。動きが重要なら元の素材を残すか、別途動きを再実装する必要があります。このガイドの計測対象は静止画です。
置き換えで何を実現するか
| 要件 | WebPを残す | SVGへトレース | 図形として描き直す |
|---|---|---|---|
| 固定サイズで見た目を維持 | 再構成は不要 | 輪郭と色の変化を確認 | 見た目の変更に承認が必要 |
| ベクター原本のないマークを復元 | 代替素材として保持 | 輪郭を近似できる | 意図した形が分かる場合に適する |
| 円の半径や色を変更 | ラスターの再出力が必要 | 複数領域の編集が必要な場合がある | 円の属性で制御できる |
| 許容できる最小のファイルを配信 | 現在のファイルを測る | ダウンロード結果を測る | 作成したファイルを測り形状を確認 |
SVGという拡張子だけでスタイル制御が可能になるわけではありません。固定色の多いトレースが、そのままテーマ対応アイコンになるとは限りません。画像要素で読み込んだ外部SVGの内部図形も、ページのCSSから直接選択できません。
実際の変換例: 単純なWebPアイコン
公開しているWebPは256 x 256ピクセルの静止画です。SVGKITのColor / Originalの結果を2026年9月13日に計測しました。これは保存済みの出力であり、今後のエンジンや設定でもバイト数が一致するという意味ではありません。
既存の輪郭をたどる
トレースは元画像の柔らかい輪郭と色の領域を追います。円形だからcircle要素が1つになるとは考えず、薄い縁を確認してください。
- 元ファイル
- 4,188 B
- SVG
- 2,936 B
- パス
- 22
計測日: · 設定: Color / Original
意図的に描き直した円と比較する
トレースと直接作成の違い
描き直した例は意図的に単純化した円です。薄い縁と微妙な色の違いを除いており、SVGKITが元のデザインを復元したものではありません。
- トレースのパス
- 22
- 描き直した円
- 1
| 公開ファイル | 生のバイト数 | 表現 | 数値だけでは分からないこと |
|---|---|---|---|
| 元のWebP | 4,188 | 256 x 256ピクセル | 最適に圧縮済みかどうか |
| 保存済みのSVGKIT出力 | 2,936 | 22パス | 承認されたデザインと輪郭が一致するか |
| 直接作成したSVG | 143 | 円1個、パス0個 | 縁の削除が許容されるデザイン変更か |
トレースはこのWebPより1,252バイト、約29.9%小さくなりました。143バイトの描き直しがさらに小さいのは、より単純な見た目を記述しているためです。可逆圧縮の結果として紹介するのは不正確です。これは生のファイルサイズであり、圧縮後の転送量や描画時間ではありません。
作成したファイルの図形全体は以下のとおりです。バイト数には末尾の改行も含みます。中心、半径、色は例のために選んだ値であり、元のデザインから復元した値ではありません。
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><circle cx="144" cy="144" r="85" fill="#e74c3c"/></svg>直接作成したSVGとファイルハッシュ付きの計測記録を確認できます。記録にはブラウザーのバージョンと再現コマンドもあります。属性についてはcircle要素の説明を参照してください。
よくある失敗
小さければ改善と判断する
小さな描き直しでも、ブランド素材としては不適切な場合があります。質感、縁、微妙な陰影を単色図形に置き換える前に、見た目の変更を承認してもらいます。
PNGを経由すれば復元できると考える
ツールが入力を受け付けるようにはできても、非可逆圧縮や失われたベクターレイヤーを元に戻すことはできません。
パスが0個なら空のSVGだと考える
描き直した例はpathではなくcircleを使っています。実際のグラフィック要素を確認してください。パス数だけでは品質を評価できません。
ベストプラクティス
- 元のWebPと実際の表示サイズを記録します。
- トレースを実寸と拡大表示で比較します。
- 透過した輪郭を2種類の背景色で確認します。
- 忠実な復元とデザインの単純化をレビュー記録で区別します。
- 削減率だけでなく、選んだファイルと置き換えの理由を残します。
実務での手順
- 1大きな表示、図形編集、容量削減のどの利点が必要か決めます。
- 2書き出しの性質を確認し、ベクター原本を探します。
- 3WebPを比較基準として残し、復元が必要な場合にトレースします。
- 4意図した形が明確なら、別途作成した図形とも比較します。
- 5各候補の見た目、構造、生のファイルサイズを確認します。
- 6要件を満たす表現を配信し、原本は保管します。
FAQ
可逆WebPなら元のSVGを復元できますか？
いいえ。可逆という性質は保存されたピクセルについてのものです。レイヤー名、円の半径、編集可能なデザインオブジェクトまでは復元しません。
24ピクセルで問題なく見えるWebPアイコンも変換すべきですか？
満たせていない要件がある場合だけ検討します。固定サイズで見た目と配信コストに問題がなければ、拡張子のためだけに再構成する必要はありません。
143バイトの結果をどの円形ロゴにも適用できますか？
いいえ。この例は元画像の細部を意図的に除いています。縁、影、質感、ブランド固有の輪郭には追加の図形や承認が必要になる場合があります。
WebPの輪郭を復元する必要がありますか？
ダウンロードしたトレースを既存の素材と比較してください。見た目や編集の要件を満たさなければWebPを残します。
Image to SVGを試す