WebP を SVG に
オンラインベクタライザーを使用して WebP を SVG に変換する
WebP のロゴ、アイコン、イラスト、その他の Web グラフィックをスケーラブルな SVG パスにトレースします。カラー モードまたは白黒モードを選択し、ソースの詳細とノイズ リダクションを調整します。
新規ファイルの既定値を編集しています
プレビュー
プレビューはありません。ファイルを追加して選択すると結果が表示されます。
ファイルがありません。上にドロップするか、「ファイルを選択」を押してください。
WebP とは
WebP は、Google によって開発された最新のラスター イメージ形式で、非可逆圧縮と可逆圧縮の両方、および完全なアルファ透明度をサポートしています。優れたビジュアル品質を維持しながらコンパクトなファイルを作成できるため、Web 配信によく使用されます。
SVG とは
SVG（Scalable Vector Graphics）は XML をもとにしたベクター画像形式です。ピクセルではなく、図形、パス、塗り、線を数式で表すため、どんなサイズで描画しても品質が落ちません。
SVGはWeb標準のベクター形式です。すべての最新ブラウザでネイティブに表示でき、CSSでの装飾やJavaScript、SMILによるアニメーションにも対応します。ロゴ、アイコン、イラストでは軽量になりやすい一方、複雑なSVGはファイルサイズが大きくなる場合があります。
SVG とラスター形式の比較
ベクター画像（SVG）とラスター画像（PNG、JPG）は用途が異なります。画像を何に使うかによって適した形式が決まります。
| 項目 | SVG | PNG / JPG | ICO / ICNS |
|---|---|---|---|
| 拡大縮小 | 解像度に依存しない | 拡大するとぼやける | 固定サイズで事前に描画 |
| ファイルサイズ | 図形やアイコンは小さい | 解像度とともに増える | 各サイズの画像の集合 |
| 編集 | テキストやベクターツールで編集可 | ピクセル単位の編集のみ | 各サイズを編集して再度まとめる |
| アニメーション | CSS、SMIL、JavaScript | 限定的（APNG / GIF） | 非対応 |
| 透過 | 対応 | PNG は対応、JPG は非対応 | 対応（PNG ベース） |
WebP を SVG に変換するのはどんなとき
最新の Web 画像をロゴ、アイコン、印刷素材として使いたいときは、WebP を SVG に変換してください。WebP の非可逆モードはわずかなにじみを生み、トレーサーがそれを拾うことがあるため、品質の低い WebP ではノイズ除去を強めてください。透過 WebP はきれいにトレースでき、アルファチャンネルは出力にそのまま引き継がれます。
WebP から SVG：ファイルサイズと品質のバランス
ファイルサイズ
シンプルな WebP ロゴとアイコンは、コンパクトな SVG ファイルにトレースできます。詳細または写真の WebP 画像は、より多くの形状を作成し、特にソースが多くの色または微妙なグラデーションを使用している場合、より大きな結果を生成する可能性があります。
SVG が元の WebP に勝るとき
WebP がロゴ、ステッカー、アイコン、特に透過のあるものなら SVG に変換してください。ベクターになれば拡大、色替え、スタイル指定が簡単になります。SVG は HTML に直接埋め込めるため、別の WebP ファイルを配信する場合と違ってリクエストが 1 回減ります。
元の WebP を使い続けるべきとき
スケーラビリティよりもネットワーク上のコンパクトなバイトが重要な写真や画像には、WebP を使用してください。 WebP の非可逆モードは通常、複雑なアートワークの同等の SVG よりも小さく、数千のパスを含む SVG よりもデコードが高速になる可能性があります。
品質とのバランス
ロスレス WebP はきれいにトレースします。SVG はソースが許可する限り鮮明です。非可逆 WebP は、トレーサーが追加のカラー領域として読み取ることができる微妙なスムージングを実行します。それらをマージするには、グラデーションのステップを上げます。透明な領域は透明なままにすることができますが、柔らかい半透明のエッジはトレース プロセスによって近似することができます。
WebP を SVG にオンラインで変換する方法
- 1
ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
- 2
出力設定（サイズ、DPI、背景、品質、トレースの細かさ）を指定すると、プレビューがその場で更新されます。
- 3
「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。
プライバシー：ファイルはブラウザから出ません
変換は、JavaScript および WebAssembly を使用してブラウザーでローカルに実行されます。ファイルのアップロードやサーバー側の変換がないため、追加したファイルはデバイス上に残ります。
ローカル処理は、機密ロゴ、内部文書、未公開のクライアント アートワークを保護するのに役立ちます。ページと変換コードは使用中にキャッシュされるため、すでに開いているツールはネットワーク接続がなくても引き続き動作できます。
よくある質問
WebP の透過は SVG に引き継がれますか？
WebP は完全なアルファ透明度をサポートしており、透明領域は SVG 出力で透明なままにすることができます。トレースではピクセルがパスで近似されるため、プレビューで柔らかい半透明のエッジを検査します。
WebP にはカラーと白黒のどちらのモードを使うべきですか？
ロゴ、イラスト、複数の塗りがあるものにはカラーが最適です。白黒は線画やスキャンした図をきれいなシルエットにします。白黒のしきい値のスライダーで、黒と白の境目を選べます。
SVG は元の WebP より小さくなりますか？
単純なグラフィック（ロゴ、アイコン）ならたいてい小さくなり、しかも SVG は品質を落とさずに拡大できます。写真調の WebP では、トレースされた図形ごとにパスが増えるため SVG のほうが大きくなることがあります。「軽量」プリセットを使うか、ノイズ除去を強めて SVG を小さく保ってください。