SVG を WebP に
SVG をフル透過対応の WebP に変換
SVG を最新の WebP に書き出します。同程度の品質で PNG より小さく、フル透過にも対応。読み込みの速い本番用アセットを用意したい Web 開発者向けです。
新規ファイルの既定値を編集しています
プレビュー
SVG とは
SVG（Scalable Vector Graphics）は XML をもとにしたベクター画像形式です。ピクセルではなく、図形、パス、塗り、線を数式で表すため、どんなサイズで描画しても品質が落ちません。
SVG は Web における標準のベクター形式です。最新のブラウザはすべて標準で対応し、CSS でスタイルを指定でき、JavaScript や SMIL でアニメーションもできます。同等のラスター画像に比べてファイルサイズも大幅に小さくなります。
WebP とは
WebP は Google が開発した最新のラスター画像形式で、非可逆と可逆の両方の圧縮と、完全な透過に対応しています。同程度の品質なら、WebP のファイルは同等の PNG や JPG より 25〜35% 小さくなるのが一般的で、Web 配信でよく使われています。
SVG とラスター形式の比較
ベクター画像（SVG）とラスター画像（PNG、JPG）は用途が異なります。画像を何に使うかによって適した形式が決まります。
| 項目 | SVG | PNG / JPG | ICO / ICNS |
|---|---|---|---|
| 拡大縮小 | 解像度に依存しない | 拡大するとぼやける | 固定サイズで事前に描画 |
| ファイルサイズ | 図形やアイコンは小さい | 解像度とともに増える | 各サイズの画像の集合 |
| 編集 | テキストやベクターツールで編集可 | ピクセル単位の編集のみ | 各サイズを編集して再度まとめる |
| アニメーション | CSS、SMIL、JavaScript | 限定的（APNG / GIF） | 非対応 |
| 透過 | 対応 | PNG は対応、JPG は非対応 | 対応（PNG ベース） |
SVG を WebP に変換するのはどんなとき
WebP は PNG 並みの透過を JPG 並みのファイルサイズで実現し、見た目が同程度なら PNG より 25〜35%、JPG より 10〜25% 小さくなります。最新の Web サイトやアプリに画像を載せるときは SVG を WebP に変換してください。現行のブラウザはすべて対応しており（Chrome、Firefox、Safari 14 以上、Edge）、体感できる品質の低下なしに転送量を減らせます。
SVG から WebP：ファイルサイズと品質のバランス
ファイルサイズ
WebP は見た目が同程度なら、同等の PNG より 25〜35%、JPG より 10〜25% 小さくなるのが一般的です。PNG にすると 800 KB になる 1920×1080 の SVG は、WebP ではおよそ 500 KB に収まり、フルアルファの透過も保たれます。
WebP が適しているとき
最新の Web 配信には WebP が最適です。Chrome、Firefox、Safari（14 以上）、Edge のすべてが対応しています。サイトのアイコン、ヒーロー画像、商品写真、イラストなど、転送量が重要で閲覧環境を把握できる素材に使ってください。
WebP ではなく SVG のままにすべきとき
素材が小さいもの、もともとベクターのもの（アイコン、ロゴ、図表）、拡大やアニメーションが必要なものは SVG のままにしてください。SVG は HTML に直接埋め込め、アイコン程度の内容なら WebP よりも小さいのが普通です。WebP に確実に対応していない CMS やメールソフトが相手の場合も SVG のままにしてください。
品質とのバランス
WebP には非可逆と可逆の両方のモードがあります。非可逆の 0.9 は、ほとんどの内容で可逆と見分けがつきません。0.7 では輪郭にわずかなにじみが出ますが、JPG ほど目立ちません。フルアルファの透過はどちらのモードでも保たれます。アイコンやロゴには可逆を、写真やグラデーションには非可逆を選んでください。
SVG を WebP にオンラインで変換する方法
- ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
- 出力設定（サイズ、DPI、背景、品質、トレースの細かさ）を指定すると、プレビューがその場で更新されます。
- 「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。
プライバシー：ファイルはブラウザから出ません
ファイルが端末の外に出ることはありません。変換は JavaScript と WebAssembly を使ってすべてブラウザ内で実行されます。アップロードもサーバー処理もないため、ファイルに関する情報がどこかへ送られることはありません。
何もアップロードされないため、社外秘のロゴ、社内文書、未公開の顧客作品にも安心して使えます。使用中に端末へキャッシュされるので、初回訪問のあとはネットワーク接続がなくても動作します。
よくある質問
WebP は透過に対応していますか？
はい。WebP はアルファチャンネルによる完全な透過に対応しており、透明な部分のある SVG も PNG と同じように扱えます。書き出すときに「透過」の背景を選んでください。
PNG ではなく WebP を使うべきなのはどんなときですか？
同程度の品質なら、WebP のファイルは同等の PNG より 25〜35% 小さくなるのが普通で、透過の対応も同じです。Web には最適な選択肢です。Chrome、Firefox、Safari、Edge など主要ブラウザはすべて対応しています。
WebP に品質設定はありますか？
はい。JPG の品質を調整するのと同じスライダーが WebP にも効き、WebP は非可逆とほぼ可逆の両方のモードに対応します。多くの内容では 0.9 前後がまず選ぶなら無難です。