WebPをSVGに変換：画像を本物の編集可能なパスにトレース

WebPは、JPGやPNGと同じく、ピクセルの格子で構成されたラスター画像です。GoogleのWebPドキュメントは、非可逆と可逆のWebPをどちらも画像圧縮形式と定義しています。一方、SVGは図形とパスでベクターグラフィックを定義します。そのため、「SVGとして保存」するだけでピクセルがベクター形状に変わるわけではありません。先に画像を図形とパスにトレースする必要があります。(GoogleのWebP概要、W3C SVG 2)

WebPを本当にきれいで編集可能なSVGに変換する方法、注意点、変換しない方がよい場合を説明します。

元画像がWebPではなくAVIFなら、元のファイルを残し、トレース前に別形式へ変換する工程を加える代わりに、AVIFからSVGへの変換ツールを使ってください。

要点

• WebPはラスターなので、ベクターとして「保存」するのではなく、ベクターにトレースする必要があります。
• 偽ベクターに注意してください。WebPを.svgの中に埋め込む変換ツールでは、拡大してもピクセルが見えます。
• WebPには非可逆と可逆があります。非可逆には圧縮ノイズがあるため、できるだけきれいな元画像を使います。
• フラットでコントラストの高い作品は変換に適しています。写真は向きません。
• WebPからSVGへの変換ツールでトレースし、本当に編集できるか確認してください。

多くの変換ツールが説明しないこと

検索上位の結果では曖昧なこともあるため、実際に何が起こるかを明確にしておきます。

• WebPはピクセルを保存します。非可逆圧縮、可逆圧縮、透明部分、アニメーションに対応していますが、ラスターであることは変わりません。GoogleのWebPコンテナー仕様を参照してください。
• SVGは数学的な情報を保存します。点、パス、曲線によって、どのサイズでも鮮明さを保ちます。

アニメーションには別の判断が必要です。動くラスターをSVGに変えても、動きが自動的に保持されるわけではありません。アニメーションGIFからSVGへの変換ガイドでは、1フレームをトレースすることと、SVGアニメーションを再構築することの違いを説明しています。

元画像がGIFで、編集可能な静止画を1枚作りたい場合は、GIFフレームからSVGへの変換ツールで、トレース前にその瞬間を選んでください。動きも必要なら、アニメーションは別に保管します。

両者の間に情報を失わない単純な「変換」はありません。WebPからSVGにするには、ピクセルを図形として描き直す、つまりベクター化（トレース）を行います。だから、本当の変換にはファイル名の変更ではなく、トレースツールが必要です。

避けるべき落とし穴： SVGは<image>要素を通じてラスター画像を埋め込めます。そのファイルには.svgの拡張子が付きますが、埋め込まれたピクセルは編集可能なパスに変わっておらず、拡大するとぼやけます。SVGの埋め込みコンテンツに関するW3C仕様を参照してください。 必要なのは、画像を本物のパスにトレースするツールです。

非可逆か可逆かで結果が変わる

WebPには非可逆と可逆の種類があり、どちらかによってトレース結果が変わります。

• 非可逆WebPは、ウェブでよく使われる書き出し形式です。JPGのように圧縮するため、ノイズや柔らかく乱れた輪郭を含みます。トレースはそれらも拾うため、手元で最も高品質なものから始めてください。JPGからSVGへの変換と同じ問題です。
• 可逆WebPは、PNGのように輪郭を鮮明に保つため、きれいにトレースできます。きれいな元画像を使う手順は、品質を落とさずPNGをSVGに変換する方法をご覧ください。

WebPはアルファチャンネルによる透明部分にも対応します。背景が透明な画像では、それを保持する変換ツールを使ってください。そうしないと、図形の背後に不要な塗りつぶしの四角ができます。GoogleのWebP可逆ビットストリーム仕様を参照してください。

WebPをSVGに変換する手順

1. 最も良い元画像から始めます。 元の最高品質のWebPを使います。強く圧縮された非可逆ファイルなら、トレースのノイズが増えると考えてください。
2. 汎用のファイル変換ツールではなく、本物のベクター化ツールを使います。 必要なのはラスターを埋め込むツールではなく、画像をパスにトレースするツールです。
3. ベクター化します。 WebPからSVGへの変換ツールにWebPを読み込み、ノードの少ないきれいなパスとして再構築します。
4. 色を単純化し、透明部分を保ちます。 非可逆WebPが加える、ほぼ同じ色を統合し、透明な背景がそのまま透明であることを確認します。
5. ダウンロードして確認します。 次の項目を見てください。

PerfectVectorでの例

WebPで目指すのは、ピクセルを偽装したものではなく、編集できるきれいなパスを持つ本物のベクターです。PerfectVectorはそれを生成します。WebPを滑らかでノードの少ないパスにトレースし、透明部分を保ち、非可逆WebPが増やした余分な色を統合するカラーエディターを提供します。WebPをきれいなSVGに変換し、自分でパスを確認できます。クレジットカードなしで、最初の画像を無料変換できます。

結果を素早く確認する。 本当のWebPからSVGへの変換は、次の条件を満たします。

• WebPを.svgに埋め込んだものではなく、編集可能なパスです。拡大しても鮮明なはずです。
• ノード数が少なく、何千もの点ではなく、きれいな曲線になっています。詳しくは、ノード数の解説をご覧ください。
• 元画像に透明部分があれば、不要な背景の四角を作らず、透明部分を保持しています。
• パレットが整っており、非可逆WebPが追加した余分な色ではなく、意図した色だけが残っています。

変換ツールを使わない方がよい場合

すべてのWebPにトレースが適しているわけではありません。

• 写真や写実的な画像は、平面的な色の塊に単純化されるため、ラスターのまま残します。
• グラデーションや質感の多い作品は繊細さを失います。ベクターが必要ならフラットな図形で作り直してください。
• 小さすぎるWebPや強く圧縮されたWebPは救えません。より良い元画像を探すか、作品を作り直します。

ベクター化は、ロゴ、アイコン、単純なグラフィックのようなフラットでイラスト的な作品のためのもので、写真には向きません。初めての場合は、画像のベクター化とは何かからご覧ください。

よくある質問

WebPをそのままSVGとして保存できますか？ いいえ。WebPはピクセルからなるラスター画像で、SVGは図形とパスからなるベクターです。「名前を付けて保存」だけで一方が他方に変わるわけではありません。画像をベクター図形にトレースする必要があり、それを行うのがベクター化ツールです。

SVGに「変換」したWebPが、まだ粗く見えるのはなぜですか？ 汎用の変換ツールが、トレースではなく、WebPを.svgで包んで埋め込んだ可能性があります。それは偽ベクターで、ピクセルはそのままです。画像を本物の編集可能なパスにトレースするツールを使ってください。

WebPをSVGに無料で変換できますか？ はい。WebPをベクター化ツールにアップロードし、色を単純化して、SVGをダウンロードします。クレジットカードなしで、最初の画像を無料変換できます。WebPを.svgで包んだだけでなく、本当にトレースしたベクターか確認してください。

WebPの透明部分はSVGに引き継がれますか？ 保持する変換ツールを使えば可能です。WebPは透明部分に対応しており、適切なトレースなら背景を透明に保つので、不要な塗りつぶしの四角ができません。

WebPの写真をSVGに変換できますか？ 可能ですが、通常はおすすめしません。写真には階調やグラデーションが多すぎて、きれいな図形にならず、単純化された色の塊か、巨大なファイルになります。ベクター化はロゴ、アイコン、イラストに適しています。

出典

1. Google for Developers：ウェブ向けの画像形式：WebPの非可逆、可逆、アルファ機能の公式概要です。
2. Google for Developers：WebPコンテナー仕様：静止画、アニメーション、透明部分に関する形式の詳細です。
3. W3C：Scalable Vector Graphics (SVG) 2：SVGのベクターグラフィックモデルを定義する標準です。
4. W3C：SVGの埋め込みコンテンツ：ラスター画像をパスに変換せずSVGに埋め込めることを示す仕様です。

---

拡大して使いたいWebPのロゴやグラフィックがありますか？本物の編集可能なSVGに変換してください。トレースし、色を単純化して、数秒でダウンロードできます。