Advertisement
透明度を保持
ロゴやイラストの透明部分を保持するか、背景色を追加できます。
SVG WebP 変換
ウェブサイトやCMS向けのWebPを作成。透明度と寸法を設定し、画質と実際のファイルサイズを確認できます。
ウェブ用のWebP画像
出力結果を確認
プレビューは生成されたWebPとサイズを表示します。画質を下げる際は小さな文字や輪郭を確認してください。
用途に合わせて選ぶ
WebPはラスター画像です。自由な拡大縮小が必要なら元のSVGを保持してください。単純なSVGより小さくなるとは限りません。
使い方
- 1
SVGを選ぶか、コードを貼り付けます。
- 2
寸法、透明度、画質を設定します。
- 3
WebPを確認して保存します。
ラスター画像が必要な用途にWebPを
SVGからWebPへの変換はベクター図形を画素にします。CMSへの登録、サムネイル、ウェブ用イラストなどに使えます。小さなSVGロゴをそのまま扱えるサイトなら、SVGを残すと拡大縮小でき、容量も小さい場合があります。実際のファイルを比較してください。
SVGを残すか、WebP・PNG・JPGにするか
横にスクロールして表全体を確認 →
| 形式 | 向いている用途 | 注意点 |
|---|---|---|
| SVG | 自由に拡大縮小するベクターロゴ | 提出先のSVG対応と外部リソースを確認します。 |
| WebP | 画質を調整したいウェブ用画像 | 透過に対応しますが、画素数は固定です。 |
| PNG | 細い輪郭や可逆のラスター出力 | 非可逆の画質設定はありません。同じ寸法で容量を比較します。 |
| JPG | JPEGを要求するフォームや文書 | 透明部分は単色の背景になります。 |
WebPの寸法と画質を決める
01表示寸法から考える
320 × 180 CSSピクセルのサムネイルなら、2倍密度が必要な場合に640 × 360を検討できます。不要に大きな画像では、画質を下げて節約した容量を上回ることがあります。
02透過か背景色を選ぶ
初期値は透過です。白い文字のロゴは実際の背景でも確認してください。元のSVGにある不透明な矩形は自動削除されません。
03同じ条件で容量を比較する
90%から下げながら実際の出力を確認します。PNGやJPGと比べるときは寸法と背景を揃えてください。表示容量は今回の出力結果であり、どのSVGにも同じ削減率が得られるわけではありません。
WebPが大きくなる・ぼやける理由
- 元のSVGより大きい
- 数本のパスで表せるロゴも、ラスター化すると画素の符号化が必要です。用途が許せばSVGを残すか、出力寸法を小さくします。
- 小文字や輪郭がぼやける
- 画質を上げ、表示に必要な解像度で出力します。細線の図ではPNGと比較してください。このツールの画質100は可逆WebPを保証しません。
- ブラウザーがWebPを書き出せない
- 実際の形式を確認し、PNGへフォールバックした場合はエラーにします。WebPの書き出しに対応したブラウザーかPNGをご利用ください。拡張子の変更では形式は変わりません。
SVGはどこで処理されますか？
変換はブラウザー内で行い、SVGを変換のために当サイトのサーバーへアップロードしません。ツール間で引き継ぐ原稿はメモリに保持し、再読み込みで消去します。外部画像やフォントの取得には通信が必要な場合があります。文字のパス化とリソースの埋め込みで外部依存を減らせます。 プライバシーポリシー
よくある質問
透明な背景に対応していますか？
はい。「透明」のままにするか、背景色を指定できます。
必ずSVGより小さくなりますか？
いいえ。単純なロゴはSVGのほうが小さい場合があります。ラスター画像が必要な場面で、実際のサイズを比較してください。
画質100は可逆圧縮ですか？
いいえ。ブラウザーの画質設定であり、可逆WebPを保証しません。可逆のラスター出力にはPNGをご利用ください。
ブラウザーがWebPを書き出せない場合は？
実際の形式を検査してエラーを表示します。PNGを.webpという名前で保存することはありません。新しいブラウザーやPNGをお試しください。
SVGアニメーションを動くWebPにできますか？
いいえ。単一の静止画像を出力します。SVGのタイムラインを保持したり、アニメーションWebPを生成したりする機能はありません。
SVGをWebPに一括変換できますか？
一括SVG変換ツールでWebPと共通設定を選び、ZIPで保存できます。このページでは1つずつ処理します。
技術資料: MDN：ブラウザーの画像符号化と画質
SVGで次の作業へ
- 可逆PNGと比較する →
細い線、小文字、透過図表に適しています。
- 提出先がJPEGを要求する場合 →
背景色を選びJPGとして書き出します。
- WebPをまとめて書き出す →
複数のSVGに共通の寸法と画質を設定できます。
関連ガイド
- PNG、JPG、WebP、AVIFの違いと選び方
ロゴ、写真、スクリーンショット、透過画像、Web用画像で、PNG、JPG、WebP、AVIFのどれを選ぶべきかを実用的に解説します。
- SVGのフォント、外部画像、filterが書き出しで失敗する理由
SVG書き出しで起きるフォント置き換え、外部画像の欠落、filterの違い、maskやclipPathの失敗を実用的に確認します。