SVGをWebPに変換
SVG を軽量な WebP 画像に変換。PNG や JPG より高速に読み込まれ、輪郭のシャープさと透過も保たれます。Web のアイコンやロゴに最適です。
ここにSVGファイルをドロップ
またはクリックしてファイルを選択
SVGのアートワークをWebPに変換します。同じ見た目の品質ならPNGやJPGより小さくでき、輪郭のシャープさと透過も保たれる形式です。この組み合わせが、現代的なWebサイトでアイコンやロゴの既定の選択になっている理由です。
WebPは現在のすべてのブラウザが対応しているため、互換性の心配はほぼ過去のものです。どうしても非常に古いクライアントに配信する必要がある場合はPNGの代替を用意してください。それ以外では、WebPのほうが単純に良いファイルです。
SVGをWebPに変換する方法
.svgファイルを選択します
出力サイズと画質を設定します
WebPをダウンロードします
よくある質問
WebPはどこでも使えますか？
現在のChrome、Firefox、Safari、Edgeではモバイルも含めて対応しています。PNGやJPGの代替が必要になるのは非常に古いブラウザだけです。
PNGより小さくなりますか？
ほとんどのグラフィックで明確に小さくなり、同じ見た目の品質で25〜50%小さくなることもよくあります。PNGなら大きくなる透過も保てます。
WebPはアニメーションにできますか？
形式としてはアニメーションに対応していますが、この変換ツールがSVGから生成するのは1枚の静止画像です。
サイトではどう使いますか？
他の画像と同じように参照してください。<img>タグ内の.webpファイルはそのまま機能し、対応しているブラウザが自動的に使います。
画像編集ソフトで開けますか？
現在のバージョンのPhotoshop、GIMP、Affinity、そしてほとんどのコードエディターがWebPを扱えます。非常に古いツールでは開けないことがあり、それがPNGの複製を残す主な理由です。
ファイルはアップロードされますか？
いいえ。変換はブラウザ内でローカルに行われます。
概要
| 入力 | SVG |
|---|---|
| 複数ファイル | いいえ |
| 実行場所 | ブラウザ内で実行 - ファイルはアップロードされません |
| オフラインでも動作 | はい — ページを読み込んだ後 |
| 料金 | 無料・登録不要・透かしなし |
どの出力形式を選ぶか
SVGから始めてビットマップが必要な場合、ほぼ常に正解はPNGです。透過を保て、輪郭や文字の周りに圧縮による劣化が出ず、表示サイズの2倍か3倍でレンダリングすれば鮮明なままです。JPGを選ぶのは、できるだけファイルを小さくしたい、しかも守るべき透過も細かな細部もない場合だけにしてください。JPGは透過をまったく表現できず、透明な部分は白か黒になることを忘れないでください。画像をWebサイトに載せ、透過とより小さなファイルの両方が欲しい場合はWebPを選びます。どれを選んでも、必要だと思うより高い解像度で書き出してください。大きなきれいな画像を縮小するほうが、小さな画像を拡大するより常によく見えます。
SVG出力の実務的な注意点
SVGはテキストなので、書き出し時に選んだ解像度で拡大縮小します。表示したいサイズの2倍や3倍でレンダリングすれば、高密度ディスプレイでも鮮明なままです。テキストであるため圧縮やキャッシュにも向き、CSSで装飾したりアニメーションを付けたりできます。注意すべき点が2つあります。SVG内のテキストはフォントを利用できるかに依存するため、テキストをアウトライン化すると、どこでも同じ見た目になる代わりに選択も検索もできなくなります。また、SVGはスクリプトや外部参照を含められるため、アップロードフォームやメールソフトが受け付けないことがよくあります。