WebP を SVG に
WebP を SVG に変換：最新の Web 画像をベクター化
透過や非可逆の WebP を含む WebP 画像を、拡大自在な SVG パスに変換します。透過はそのまま引き継がれ、グラデーション段階を上げると非可逆 WebP 特有のにじみをまとめられます。
新規ファイルの既定値を編集しています
プレビュー
WebP とは
WebP は Google が開発した最新のラスター画像形式で、非可逆と可逆の両方の圧縮と、完全な透過に対応しています。同程度の品質なら、WebP のファイルは同等の PNG や JPG より 25〜35% 小さくなるのが一般的で、Web 配信でよく使われています。
SVG とは
SVG（Scalable Vector Graphics）は XML をもとにしたベクター画像形式です。ピクセルではなく、図形、パス、塗り、線を数式で表すため、どんなサイズで描画しても品質が落ちません。
SVG は Web における標準のベクター形式です。最新のブラウザはすべて標準で対応し、CSS でスタイルを指定でき、JavaScript や SMIL でアニメーションもできます。同等のラスター画像に比べてファイルサイズも大幅に小さくなります。
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 はトレース時に PNG と同じように振る舞い、100 KB のアイコンはたいてい 5〜30 KB の SVG になります。非可逆 WebP は JPG と同じで、写真調の 300 KB の WebP からは細部が簡略化された 100〜400 KB の SVG ができます。どちらの場合も透過は SVG に引き継がれます。
SVG が元の WebP に勝るとき
WebP がロゴ、ステッカー、アイコン、特に透過のあるものなら SVG に変換してください。ベクターになれば拡大、色替え、スタイル指定が簡単になります。SVG は HTML に直接埋め込めるため、別の WebP ファイルを配信する場合と違ってリクエストが 1 回減ります。
元の WebP を使い続けるべきとき
写真や、拡大性より転送量の小ささが大事な画像は WebP のままにしてください。複雑な絵柄では WebP の非可逆モードのほうが同等の SVG より小さくなるのが普通で、パスの多い SVG よりブラウザのデコードもずっと高速です。
品質とのバランス
可逆 WebP はきれいにトレースでき、元画像が許すかぎり SVG も鮮明になります。非可逆 WebP にはわずかなにじみがあり、トレーサーが余分な色領域として読み取ることがあります。グラデーション段階を上げてまとめてください。透過は半透明のピクセルも含めてそのまま保たれます。
WebP を SVG にオンラインで変換する方法
- ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
- 出力設定（サイズ、DPI、背景、品質、トレースの細かさ）を指定すると、プレビューがその場で更新されます。
- 「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。
プライバシー：ファイルはブラウザから出ません
ファイルが端末の外に出ることはありません。変換は JavaScript と WebAssembly を使ってすべてブラウザ内で実行されます。アップロードもサーバー処理もないため、ファイルに関する情報がどこかへ送られることはありません。
何もアップロードされないため、社外秘のロゴ、社内文書、未公開の顧客作品にも安心して使えます。使用中に端末へキャッシュされるので、初回訪問のあとはネットワーク接続がなくても動作します。
よくある質問
WebP の透過は SVG に引き継がれますか？
はい。WebP はフルアルファの透過に対応しており、トレーサーは透明な部分を SVG の出力でも透明のまま保ちます。そのため結果はどんな背景の上にもきれいに重なります。
WebP にはカラーと白黒のどちらのモードを使うべきですか？
ロゴ、イラスト、複数の塗りがあるものにはカラーが最適です。白黒は線画やスキャンした図をきれいなシルエットにします。白黒のしきい値のスライダーで、黒と白の境目を選べます。
SVG は元の WebP より小さくなりますか？
単純なグラフィック（ロゴ、アイコン）ならたいてい小さくなり、しかも SVG は品質を落とさずに拡大できます。写真調の WebP では、トレースされた図形ごとにパスが増えるため SVG のほうが大きくなることがあります。「軽量」プリセットを使うか、ノイズ除去を強めて SVG を小さく保ってください。