SVG を WebP に
透明性を確保しながらオンラインでSVGをWebPに変換します
調整可能な品質と完全なアルファ透明度を備えたコンパクトな WebP 画像を作成します。寸法と背景を設定し、最大 40 個の SVG ファイルを変換し、ジョブ全体をブラウザーに保存します。
新規ファイルの既定値を編集しています
プレビュー
プレビューはありません。ファイルを追加して選択すると結果が表示されます。
ファイルがありません。上にドロップするか、「ファイルを選択」を押してください。
SVG とは
SVG（Scalable Vector Graphics）は XML をもとにしたベクター画像形式です。ピクセルではなく、図形、パス、塗り、線を数式で表すため、どんなサイズで描画しても品質が落ちません。
SVGはWeb標準のベクター形式です。すべての最新ブラウザでネイティブに表示でき、CSSでの装飾やJavaScript、SMILによるアニメーションにも対応します。ロゴ、アイコン、イラストでは軽量になりやすい一方、複雑なSVGはファイルサイズが大きくなる場合があります。
WebP とは
WebP は、Google によって開発された最新のラスター イメージ形式で、非可逆圧縮と可逆圧縮の両方、および完全なアルファ透明度をサポートしています。優れたビジュアル品質を維持しながらコンパクトなファイルを作成できるため、Web 配信によく使用されます。
SVG とラスター形式の比較
ベクター画像（SVG）とラスター画像（PNG、JPG）は用途が異なります。画像を何に使うかによって適した形式が決まります。
| 項目 | SVG | PNG / JPG | ICO / ICNS |
|---|---|---|---|
| 拡大縮小 | 解像度に依存しない | 拡大するとぼやける | 固定サイズで事前に描画 |
| ファイルサイズ | 図形やアイコンは小さい | 解像度とともに増える | 各サイズの画像の集合 |
| 編集 | テキストやベクターツールで編集可 | ピクセル単位の編集のみ | 各サイズを編集して再度まとめる |
| アニメーション | CSS、SMIL、JavaScript | 限定的（APNG / GIF） | 非対応 |
| 透過 | 対応 | PNG は対応、JPG は非対応 | 対応（PNG ベース） |
SVG を WebP に変換するのはどんなとき
最新の Web サイトまたはアプリ用のコンパクトなラスター イメージが必要な場合は、SVG を WebP に変換します。 WebP は完全なアルファ透明度と調整可能な品質設定をサポートしているため、透明なグラフィックスと写真スタイルのアートワークの両方に機能します。現在のブラウザで広くサポートされていますが、ファイルを受信する CMS、電子メール クライアント、または古いアプリケーションの要件を確認してください。
SVG から WebP：ファイルサイズと品質のバランス
ファイルサイズ
多くの場合、WebP は、同じサイズの PNG よりも小さなファイルを生成しますが、結果はアートワークと品質設定によって異なります。 JPG とは異なり、完全なアルファ透明度を保持できるため、シースルー領域のあるコンパクトな Web グラフィックに役立ちます。
WebP が適しているとき
WebP は最新の Web 配信に強力な選択肢であり、現在のブラウザーで広くサポートされています。帯域幅が重要で、宛先が WebP を受け入れる場合は、サイトのグラフィック、製品のショット、イラストに使用します。
WebP ではなく SVG のままにすべきとき
素材が小さいもの、もともとベクターのもの（アイコン、ロゴ、図表）、拡大やアニメーションが必要なものは SVG のままにしてください。SVG は HTML に直接埋め込め、アイコン程度の内容なら WebP よりも小さいのが普通です。WebP に確実に対応していない CMS やメールソフトが相手の場合も SVG のままにしてください。
品質とのバランス
このコンバーターは、調整可能な品質設定を持つブラウザーの WebP エンコーダーを使用します。品質が高くなると、より多くの詳細が保持されます。通常、品質を低くするとファイルは小さくなりますが、エッジが柔らかくなります。ブラウザが WebP エクスポートをサポートしている場合、完全なアルファ透明度が保持されます。
SVG を WebP にオンラインで変換する方法
- 1
ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
- 2
出力設定（サイズ、DPI、背景、品質、トレースの細かさ）を指定すると、プレビューがその場で更新されます。
- 3
「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。
プライバシー：ファイルはブラウザから出ません
変換は、JavaScript および WebAssembly を使用してブラウザーでローカルに実行されます。ファイルのアップロードやサーバー側の変換がないため、追加したファイルはデバイス上に残ります。
ローカル処理は、機密ロゴ、内部文書、未公開のクライアント アートワークを保護するのに役立ちます。ページと変換コードは使用中にキャッシュされるため、すでに開いているツールはネットワーク接続がなくても引き続き動作できます。
よくある質問
WebP は透過に対応していますか？
はい。WebP はアルファチャンネルによる完全な透過に対応しており、透明な部分のある SVG も PNG と同じように扱えます。書き出すときに「透過」の背景を選んでください。
PNG ではなく WebP を使うべきなのはどんなときですか？
最新の Web サイトまたはアプリで調整可能な圧縮とアルファ透明度が必要な場合は、WebP を使用します。多くの場合、PNG よりも小さなファイルが生成されますが、保存方法は画像と品質の設定によって異なります。 Web の外で使用する前に、宛先が WebP を受け入れていることを確認してください。
WebP に品質設定はありますか？
はい。スライダーは、ブラウザーの WebP エンコーダーから要求される品質を制御します。値を大きくすると、より多くの詳細が保持されます。一般に、値を小さくすると、より小さなファイルが作成されます。プレビューを使用して、アートワークに最適なバランスを選択します。