SVGをWebPに変換：ベクターをラスタライズし透明度を保持
SVGベクターをブラウザでWebPにレンダリング。アルファチャンネルを保持し、PNGより小さく、アップロードや登録は不要。出力サイズはSVG側で指定できます。
今すぐ変換
ファイルをここにドラッグ＆ドロップ
または
使い方
SVGは画像ではなく「設計図」です。ブラウザが指定したサイズで描き直すXMLの描画命令（パス、塗り、グラデーション、テキスト）の集まりです。一方でWebPは固定されたピクセルの格子です。このコンバーターは両者の橋渡しをします。SVGをブラウザのネイティブレンダラーに読み込み、指定した解像度でキャンバスに描画し、そのキャンバスをWebPとしてエンコードします。WebPは本物のアルファチャンネルを持つため、ベクターの透明・半透明の領域は白い背景に潰されることなく、変換後もそのまま残ります。 出力サイズはSVG側が決め、推測はしません。ツールはまずルートの<svg>要素のwidthとheight属性を読みます。それらが無ければviewBoxの縦横比に従い、どちらも無い場合は1024x1024でレンダリングします。いずれの場合も、メモリを抑えるため長辺は4096pxに制限されます。512pxのアイコンや2048pxのグラフィックが欲しいなら、変換前に<svg>要素へその寸法を設定してください。 ここでのWebPエンコードは非可逆（品質約0.92）で、これが同等のPNGを大きく下回るファイルサイズを生み出します。平面的なロゴ、アイコン、線画では違いは事実上見えません。写真のようなグラデーションでは、縁にわずかなぼやけが見える場合があります。すべてがご自身の端末上でJavaScriptで動くため、SVGがアップロードされることはなく、透かしもファイル数の制限もありません。
関連変換ツール
あなたのワークフローに役立つ他の強力なコンバーターを発見してください
SVGをJPEGに：ベクター画像を白背景でラスタライズ
SVGベクターファイルをブラウザでJPEGにラスタライズ。透明部分は白に統合され、出力は品質0.92の非可逆ラスターです。アップロードなし、透かしなし。
SVGからPNGへ変換：ベクターをブラウザでラスタライズ
SVGベクターファイルをブラウザでPNGビットマップにラスタライズ。アルファチャンネルを保持し、出力サイズも指定可能。アップロード・透かし・登録なし。
画像をWebPに変換：JPG・PNG・BMP・GIFをWebPへ
JPG・PNG・BMP・GIFをブラウザでWebPに変換。非可逆WebPでファイルを軽くし、ページ表示を高速化。アップロードなし、完全プライベート、オフラインでも動作。
JPEGをWebPに変換：写真を軽くしてWebを高速化
JPEG写真をブラウザでそのままWebPに変換し、ページの容量を削減。非可逆で再エンコードし、アップロードなし、ファイルは端末から出ません。無料・オフライン対応。
WebP圧縮：既存のWebPをより小さく再エンコード
既存のWebPをすべてブラウザ内でより小さなWebPに再圧縮。品質82で非可逆再エンコード、サイズが増えることはなく、アップロードなし、完全にプライベート。
画像を軽量化: JPG・PNG・WebPを同じ形式のまま圧縮
JPG・PNG・WebPを形式を変えずに圧縮。PNGはoxipngで完全に無劣化、JPEGとWebPは再エンコードして軽量化。ブラウザ内で動作、アップロード不要。
機能
- ファイルアップロード不要
- 100% プライバシー重視
- ブラウザー駆動
- 高速処理
- 永久無料
対応フォーマット
出力: WebP
技術仕様
主な利点
- 同じ寸法でPNGより小さいファイル、透明度はそのまま
- 本物のアルファチャンネルを保持するため、ロゴの背後に白い箱が出ない
- SVGのwidthとheightを設定して出力解像度を自分で制御
- すべてブラウザ内で動作するため、SVGはアップロードされない
- 透かしなし、アカウント不要、処理するファイル数にも上限なし
- 現行ブラウザがあれば、デスクトップでもモバイルでもどんな端末でも動作
一般的な使用例
- ベクターロゴを軽量なWebPとしてWebサイトやWebアプリで配信
- 重い透過PNGを置き換えてページ重量を減らし読み込みを高速化
- 1つのスケーラブルなソースから固定サイズのアイコンやバッジを生成
- SVGのアップロードを受け付けないプラットフォームや広告システム向けにグラフィックを書き出し
- SVG素材ライブラリのWebPサムネイルやプレビューを生成
- 最新のフロントエンド向けに透過の製品画像やUIグラフィックを配信
プロのヒント
- ルートの<svg>要素に明示的なピクセル値のwidthとheightを設定し、正確な出力サイズを制御する
- Webフォントが読み込まれていなくても文字が描画されるよう、書き出し前にテキストをアウトライン化する
- 素材の欠落を防ぐため、外部のラスター画像やCSSはSVG内にData URIとして埋め込む
- 必要な最大サイズで書き出す。WebPラスターは後から綺麗に拡大できない
- 編集可能なまま、または無限に拡大可能なまま保ちたいものは、元のSVGを残しておく
- 画素単位で正確な可逆出力が必要？ WebPではなくSVGからPNGを使う