SVGをWebPに変換
ベクターファイルを、レイアウトに必要なピクセル幅ぴったりのWebPに書き出します。CMSがSVGのアップロードを受け付けない場合、SNSのプレビューにビットマップ画像が必要な場合、パスが多すぎてブラウザの描画が遅いイラストを扱う場合に便利です。
画像変換
またはJPG, JPEG, JPE … ファイルをここにドロップ ·
1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除
ファイルは当社のサーバーで処理され、30分後に削除されます。
85 なら写真は元の画像と見た目がほぼ変わりません。ファイルを小さくしたいときだけ下げてください。
JPG、BMP、EPS は透過に対応していません。透明な部分はこの色で塗りつぶされます。
透明な部分の背景に使う16進カラーです(例: #FFFFFF)。
この形式には 1 枚の画像しか保存できません。アニメーションを残すには GIF または WebP を選んでください。
マルチサイズのアイコンは 1 つのファイルに複数の解像度を含み、ブラウザや OS が必要なサイズを選びます。
元のサイズを維持するか、片方の辺を入力すると縦横比を保ったままサイズ変更します。
上で選んだ辺のピクセル数です。
元のサイズに対する割合です。
画面や Web には sRGB が適しています。印刷用途では元の色空間を維持してください。グレースケールにすると色情報は失われます。
メタデータのみ変更します。0 なら元の値を維持します。プリンターや一部のサイトがこの値を読み取りますが、ピクセル数は変わりません。
このツールの使い方
- 1
SVGをアップロード
Figma、Illustrator、Inkscape、グラフ作成ライブラリなどから書き出した .svg ファイルを、1つあたり95 MBまで、最大20個追加します。
- 2
出力する幅を指定
出力画像のサイズ変更は幅1200 pxから始まります。ページ上で画像が占める幅の2倍に変更してください。画質は90です。フラットなロゴやアイコンの場合は、詳細設定で可逆にチェックを入れます。
- 3
WebPに変換
WebPに変換を押して、ファイルまたは1つのZIPをダウンロードします。透明な部分は透明のまま保たれます。
SVGを指定サイズのWebPに変換するには?
SVGをアップロードし、出力画像のサイズ変更に必要な幅をピクセルで指定して(初期値は1200 px)、WebPに変換を押します。ベクターはその幅で新たに描画されるため、拡大やぼけは起きません。
SVGをWebPに変換すべきケース
SVGは2001年にW3C勧告となり、ほとんどのロゴやアイコンに適した形式です。数キロバイトのテキストで、どれだけ拡大しても鮮明です。問題は、ファイルが自分のコードの外に出たときに始まります。WordPressや多くのホスト型ショップ作成サービスはSVGのアップロードを拒否し、Facebook、LinkedIn、Xのリンクプレビューはビットマップとして取得されます。また、デザインツールはラスター効果を埋め込んでイラストを書き出すため、ベクターファイルが数メガバイトのマークアップになることもあります。
WebPは、Googleが2010年に公開し、Safariが2020年のバージョン14でようやく対応したビットマップ形式で、こうした用途に向いています。同じ見た目ならPNGより小さく、本物のアルファチャンネルを備えています。SVGを最終サイズのまま直接WebPに描画すれば、大きなPNGを書き出す回り道が不要です。逆方向も知りたい場合は、WebPからSVGのページで、その方向が変換ではなくトレースになる理由を説明しています。
よく使うウェブ用画像枠別のSVG→WebPサイズ
1200 × 630 px
Open Graphのリンクプレビュー
ページが共有されたときに表示される画像
1920 × 1080 px
全幅のヒーローイラスト
等倍でほとんどのデスクトップ画面をカバー
1600 × 900 px
ブログ本文カラムの画像(2倍)
800 pxの本文カラム向け
400 × 100 px
ヘッダーロゴ(2倍)
200 × 50 pxのロゴ枠向け
SVG
Scalable Vector Graphics(SVG)
SVGは、2001年に W3C が標準化した XML ベースのベクター形式です。ピクセルではなく図形、パス、テキストを記述するため、どんなサイズでも鮮明で、ロゴやアイコンでは通常とても小さなファイルになります。透過、CSSによるスタイル指定、スクリプト、アニメーションに対応し、すべてのブラウザーがそのまま表示できます。写真には向かず、複雑なイラストは描画が遅くなることがあります。Illustrator、Inkscape、Figma、ブラウザーで開いて編集できます。
- 圧縮方式
- –
- 透過
- 対応
- アニメーション
- 対応
- 登場時期
- 2001 · W3C
WEBP
WebP 画像
WebP は、ウェブページの表示を速くするために Google が 2010 年に公開した画像形式です。非可逆圧縮と可逆圧縮の両方、アルファ透過、アニメーションを 1 つの形式で扱えます。非可逆 WebP は、同程度の画質の JPEG と比べて一般に 25–35% 小さくなり、可逆 WebP も通常は PNG より小さくなります。現行のブラウザーはすべて対応していますが、古いデスクトップソフト、印刷サービス、アップロードフォームの中には、今でも受け付けないものがあります。Windows、macOS、最近のほとんどの画像編集ソフトで WebP を開けます。
- 圧縮方式
- 非可逆または可逆
- 透過
- 対応
- アニメーション
- 対応
- 登場時期
- 2010 · Google
SVGをWebPに変換するのは、CMS、SNSのプレビュー、重いランディングページなど、ベクターファイルを受け付けない、または描画が遅い場所向けに、軽くてサイズ固定のビットマップを得るためです。WebPからSVGへはトレースの作業であり、形式の置き換えではありません。
SVGの画像化の仕組みと確認ポイント
コンバーターはSVG自体のwidth、height、viewBoxを読み取り、指定した幅ですべてのパスを描画します。高さは縦横比に従います。描画は最終サイズで行われるため、細い線や小さな文字は適切な縮尺で一度だけアンチエイリアスがかかります。小さなPNGを後から拡大しても、これほどきれいにはなりません。
フォントはよくある落とし穴です。SVGが指定する書体が埋め込まれておらず、アウトライン化もされていない場合は代替フォントが使われ、行の長さが変わります。書き出す前にデザインツールで文字をアウトライン化してください。SVG内にURLでリンクされた外部画像は取得されないため、埋め込むか、先にアートワークを統合してください。
SVGをWebPに変換するときのポイントと注意点
| 推奨 | 非推奨 |
|---|---|
| 表示されるCSS幅の2倍で書き出す | SVGのほうが小さい、シンプルなインラインアイコンを変換する |
| 色数の少ないフラットなロゴには可逆を使う | 600 pxの枠に4000 pxで書き出す |
| 今後のサイズ用にSVGの元データを残しておく | メールマガジンでWebPを送る |
| レイアウトのずれを防ぐため、WebPにはwidthとheight属性を付けて配信する | 生きたテキストを期待する:WebPはピクセルであり、選択できる文字ではありません |
SVGのWebP変換に関するよくある質問
SVGをWebPに変換するとき、ピクセル幅はいくつにすればよいですか？
CSSピクセルで表示される幅を2倍にします。そうすると、高密度の스マートフォンやノートPCの画面でも鮮明に表示されます。800 pxの列に表示するイラストなら、1600 pxで書き出します。3倍にしてもWebではほとんど効果がなく、ファイルが大きくなるわりに見た目の向上はわずかです。
ウェブサイトではSVGよりWebPのほうがよいですか？
シンプルなロゴ、アイコン、図表ではおすすめしません。きれいなSVGは非常に軽く、どのサイズでも鮮明なので、そのまま使ってください。WebPが向いているのは、グラデーション、フィルター、数千のパスを含む複雑なイラストや、SNSのプレビューやSVG非対応のCMSなど、ビットマップしか受け付けない場所です。
SVGの透明背景はWebPでも保持されますか？
はい。WebPは非可逆でも可逆でも完全なアルファチャンネルを持つため、SVGで塗りのない部分は透明のままです。図形の端は透明に対してアンチエイリアスがかかるので、どんな背景色でも自然に見えます。
ベクター画像には非可逆と可逆、どちらのWebPが適していますか？
可逆は、単色が数色だけのフラットなロゴ、アイコン、グラフに向いています。非常によく圧縮でき、端も完全にきれいなままです。画質85〜90の非可逆は、グラデーション、影、テクスチャのあるイラストに向いており、可逆だとファイルが重くなります。1つのファイルで両方試し、きれいに見える小さいほうを選んでください。
WordPressにSVGをアップロードできないのはなぜですか？
SVGにはスクリプトを含められるため、WordPressは許可するアップロード形式にSVGを含めていません。一方、WebPは2021年公開のバージョン5.8から利用できます。変換すれば、セキュリティプラグインなしでメディアライブラリに追加できるファイルになります。本物のベクターが必要なサイトでは、サニタイズ機能のあるプラグインでSVG対応を追加することもできます。
変換したWebPはメールマガジンで使えますか？
避けてください。Windows版デスクトップOutlookをはじめ、WebPを表示できないメールクライアントは複数あり、GmailもSVGを表示しません。メール用にはSVGをPNGに変換で画像化してください。
