.svg ファイルをアップロードし、必要に応じて幅と高さを選び、非可逆または可逆の WebP 圧縮を指定して変換を開始します。ダウンロードされる結果は、レンダリングされた SVG から作成された .webp ラスター画像です。
SVG WebP 変換ツール
SVG を WebP に変換すると、ベクター画像を固定ピクセルサイズのラスター画像として使えます。Webサイト、プレビュー、CMSアップロード、メール、SVGは受け付けないがWebPは使えるツールに便利です。.svg ファイルをアップロードし、出力サイズを選び、非可逆または可逆の WebP 圧縮を設定して、レンダリングされた SVG から作成された .webp ファイルをダウンロードできます。
この SVG WebP 変換ツールでできること
この SVG WebP 変換ツールは、SVG ベクターファイルを WebP ラスター画像に変換します。拡張子を変えるだけではなく、実際に形式を変換します。指定したサイズで SVG をレンダリングし、その結果を WebP として書き出します。
入力が SVG で、必要な出力が WebP の場合にこのページを使ってください。別の画像形式が必要な場合は、その形式専用の変換ツールを選ぶと、設定や出力の挙動が目的に合います。
| 設定 | 変更される内容 | 使う場面 |
|---|---|---|
| .svg アップロード | SVG 元ファイルを受け付けます | ファイル名が .svg で終わるときに使います |
| 幅と高さ | レンダリング後の WebP サイズを設定します | Webサイト、サムネイル、アップロード要件に合わせた正確なピクセルサイズを作るときに使います |
| 非可逆圧縮 | より小さい WebP ファイルを生成します | 一般的なWeb画像やプレビューに使います |
| 品質 60-100 | 非可逆 WebP の圧縮強度を調整します | 迷ったら 80 から始めるとバランスが取りやすいです |
| 可逆圧縮 | 非可逆 WebP 圧縮を避けます | アイコン、ロゴ、UI画像、くっきりしたエッジに向いています |
変換後の WebP は、編集可能なベクターファイルではありません。あとでパス、テキスト、色、レイアウトを編集する可能性がある場合は、元の SVG を残しておいてください。
SVG を WebP にオンライン変換する方法
1
ステップ 1：SVG ファイルをアップロード
端末から .svg ファイルを選ぶか、アップロードエリアにドラッグします。このページは単一ファイルの SVG WebP 変換用なので、実際にレンダリングしたい SVG 元ファイルから始めてください。
2
ステップ 2：WebP の出力サイズを設定
WebP ファイルを特定のピクセルサイズに合わせる必要がある場合は、幅と高さを入力します。標準のレンダリング動作を使う場合は空欄のままにできます。Webサイト素材では、最終表示サイズ、または高密度ディスプレイ向けに2倍サイズを選ぶと扱いやすくなります。
- •現在のサイズ入力は 1px から 16383px まで対応しています。非常に大きいサイズは重い出力ファイルになりやすいため、最終用途に必要な解像度だけを指定してください。
3
ステップ 3：圧縮モードと品質を選択
ファイルサイズを重視する場合は非可逆 WebP を使います。既定の品質 80 は、ほとんどの SVG WebP 変換で実用的な開始点です。グラデーション、文字に近い形状、影、細かいアートワークでは品質を上げ、小さなプレビューでは下げられます。
- •くっきりしたエッジ、ベタ塗り、アイコン、ロゴを重視する場合は可逆 WebP を使います。可逆 WebP はレンダリング後のピクセルをよりきれいに保てますが、SVG を編集可能なベクター画像のまま残すものではありません。
4
ステップ 4：変換して WebP をダウンロード
変換を実行し、.webp 出力をダウンロードします。Webサイト素材、CMSメディアライブラリ、プレビュー、メール向け画像、SVGよりラスター画像のほうが扱いやすい場所で使えます。
SVG のレンダリング、透過、品質
SVG と WebP は役割が異なります。SVG は図形、パス、テキスト、スタイル指示を保存します。WebP はピクセルを保存します。SVG を WebP に変換すると、選択した寸法でレンダリングされた SVG の固定サイズ画像が作成されます。
| 質問 | 期待できること |
|---|---|
| 出力はベクターのままですか？ | いいえ。WebP ファイルは固定ピクセル寸法のラスター画像です。 |
| WebP は透過を保てますか？ | はい。WebP はアルファ透過に対応しているため、透明な SVG 背景はラスター出力でも透明のままにできます。 |
| 可逆モードは SVG の品質を保ちますか？ | レンダリングされた WebP ピクセルを可逆で保存しますが、編集可能な SVG パスや無限拡大を保つものではありません。 |
| フォントは必ず一致しますか？ | SVG がレンダリング時に利用できないフォントに依存している場合、フォントが変わることがあります。テキストの見た目を正確に保ちたい場合は、文字をアウトライン化するか、埋め込みフォントや安全なフォント指定を使ってください。 |
| 外部 CSS やリンク画像はレンダリングされますか？ | 重要なスタイルや素材はできるだけ SVG 内に含めてください。外部参照は、自己完結した SVG マークアップより安定しないことがあります。 |
きれいな結果にするには、変換前に SVG を整えてください。明確な viewBox を使い、壊れた外部参照を削除し、重要なテキストをアウトライン化し、WebP の表示方法に合った寸法を選びます。
SVG ではなく WebP を使う場面
SVG は編集可能なベクター画像、シンプルなアイコン、ロゴ、多くのサイズに拡大縮小する必要があるアートワークに向いています。WebP は、最終素材を予測可能な寸法の通常画像ファイルにしたい場合に便利です。
CMS へのアップロード
セキュリティや互換性の理由で、WebP は受け付けるが SVG は拒否するプラットフォームがあります
SNS プレビュー
ラスター画像は共有ツール間で安定してプレビューしやすくなります
メール用画像
多くのメール制作フローでは、埋め込み SVG より WebP のほうが扱いやすい場合があります
Webサイト画像
グラフィックを既知の1サイズで使う場合、WebP コピーが便利です
アプリやマーケットプレイス素材
アップロード規定では、ベクター元ファイルではなくラスター画像ファイルが求められることがよくあります
デザイン引き渡し用プレビュー
固定サイズの WebP なら、レビュー担当者がベクターソフトを開かずにレンダリング結果を確認できます
SVG は元ファイルとして保管し、ラスター出力が必要な場所向けに WebP コピーを書き出してください。レスポンシブなアイコンシステムを作る場合や、あとで形状を編集する場合は、SVG がマスター形式として適していることがあります。
SVG WebP 変換のおすすめ設定
最適な設定は、アートワークの内容と WebP の用途によって変わります。小さなフラットアイコン、細かいイラスト、横幅いっぱいのWeb画像では、同じ書き出し設定にする必要はありません。
| 出力目的 | おすすめ設定 | 理由 |
|---|---|---|
| Webサイト用アイコン | 表示サイズそのまま、または2倍サイズ、可逆 | エッジとベタ塗りをきれいに保てます |
| ロゴのプレビュー | 2倍表示サイズ、可逆または品質 90-100 | 曲線や文字に近い形状をくっきり保ちやすくなります |
| 大きなイラスト | 目標表示幅、品質 80-90 | 細部とファイルサイズのバランスを取れます |
| 軽量サムネイル | 小さめの寸法、品質 60-80 | 小さなプレビュー用にファイルを軽くできます |
| 透明な重ね合わせ画像 | 透過付き WebP、品質 80+ または可逆 | 圧縮を調整しながら背景の透明を保てます |
レイアウトに必要なサイズより大幅に大きい WebP を書き出さないでください。ファイルサイズには、品質の小さな変更より寸法の選び方のほうが大きく影響することがよくあります。最終画像が幅 600px で表示されるなら、高解像度ダウンロードが必要な場合を除き、幅 3000px の WebP は通常帯域の無駄になります。
ファイル処理と実用上の制限
この変換ツールにアップロードされた SVG ファイルは、処理のためサーバー側に送信され、24時間以内に削除される予定です。作業ファイル、ブランド素材、元イラストの場合は、変換前に元の SVG をローカルに保管してください。
このページは、一括変換ツール、完全ローカルのブラウザツール、コードエディター、SVG 最適化ツール、アニメーション書き出しツール、ベクターエディターではありません。アップロードされた SVG ファイルから WebP ラスター出力を作成し、その変換に対してサイズ、圧縮、品質の設定を提供します。
アップロードフローには 20MB のファイルサイズ制限があります。このページは SVG 入力に集中したページです。約束はシンプルで、SVG ファイルをアップロードして WebP に変換することです。
避けたいよくあるミス
.svg を .webp にリネームする
拡張子を変えても SVG は WebP に変換されません。実際の変換では SVG をレンダリングし、その結果を WebP 画像ファイルとしてエンコードする必要があります。
WebP も SVG のように編集できると思う
ダウンロードした WebP はピクセル画像です。元の SVG のようにパス、形状、テキストを編集することはできません。編集用の元ファイルとして SVG を残してください。
可逆モードをベクター保証として扱う
可逆 WebP は、WebP 圧縮が非可逆のピクセル圧縮を使わないという意味です。出力がベクターのまま、無限に拡大可能、編集可能という意味ではありません。
外部フォントや CSS に依存する
SVG が埋め込まれていない外部スタイル、リモート画像、フォントに依存していると、レンダリングされた WebP がデザインソフトのプレビューと一致しないことがあります。正確なレンダリングが必要な場合は、重要なスタイルを内包し、重要なテキストをアウトライン化してください。
大きすぎる WebP を書き出す
SVG はきれいに拡大縮小できますが、WebP は固定寸法です。可能な限り大きいラスター画像を出力するのではなく、最終用途に合ったサイズを選んでください。
よくある質問
SVG WebP 変換ツールは、SVG ベクターファイルをレンダリングし、その結果を WebP 画像として書き出すツールです。プラットフォームや作業フローが編集可能な SVG マークアップではなくラスター画像を必要とする場合に役立ちます。
はい。ブラウザでページを開き、SVG ファイルをアップロードし、WebP 設定を選んで、変換後の画像をダウンロードできます。基本的な変換フローにはデスクトップ画像編集ソフトは不要です。
透明背景を持つ SVG を使い、そのまま WebP に変換します。WebP はアルファ透過に対応しているため、透明部分を出力でも保持できます。SVG がマスク、フィルター、外部スタイルを使っている場合は結果を確認してください。
可逆 WebP 圧縮を選ぶことで、非可逆 WebP エンコードを避けられます。ただし結果は固定サイズのラスター画像なので、元の SVG の編集可能なパスや無制限の拡大縮小は保たれません。最終表示サイズに十分な出力解像度を選んでください。
WebP が表示される場所に合うサイズを使います。幅 300px のWeb素材なら、標準ディスプレイでは 300px、高密度ディスプレイでは約 600px を目安にします。実際に大きく表示またはダウンロードされない限り、非常に大きい寸法は避けてください。
このページはアップロードされた SVG ファイル向けで、コード貼り付け用のエディターではありません。SVG コードがある場合は、まず有効な .svg ファイルとして保存し、そのファイルをアップロードして WebP に変換してください。
SVG がレンダリング時に利用できないフォントに依存している場合、フォントが変わることがあります。ブランドマーク、ロゴ、厳密なタイポグラフィでは、変換前に文字をアウトライン化するか、埋め込みフォントまたは安全なフォント指定を使ってください。
常にそうとは限りません。SVG は拡大縮小できるアイコン、ロゴ、編集可能なベクター画像に向いています。WebP は固定サイズの画像ファイル、CMS 互換、プレビュー、ラスター配信が必要な場合に向いています。SVG 元ファイルを残し、作業フローで必要なときに WebP コピーとして使ってください。
いいえ。この変換ツールは SVG をサーバー側で処理するためにアップロードし、アップロードされたファイルは24時間以内に削除される予定です。