SVG → WebP

SVG とは？

SVG は Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、2001 年に World Wide Web Consortium（W3C）によって標準化された XML ベースのベクター画像形式です。JPG、PNG、WebP などのラスター形式とは異なり、SVG ファイルはピクセルのグリッドではなく、数学的な記述として図形、パス、テキスト、グラデーションを保存します。つまり、小さなアイコンから巨大な看板まであらゆるサイズに拡大しても、鮮明さを失ったりピクセル化したりすることがありません。SVG は人間が読めるテキストでもあるため、検索可能で、CSS でスタイル設定でき、JavaScript でアニメーション化でき、シンプルなロゴやアイコンでは非常にコンパクトになります。

SVG はベクターベースであるため、ロゴ、アイコン、イラスト、チャート、図表、あらゆる解像度で鮮明さを保つ必要があるグラフィックに最適な形式です。すべてのモダンブラウザが SVG をネイティブにレンダリングできます。ただし、SVG は複雑な写真には適しておらず、多くの画像エディタ、ソーシャルプラットフォーム、コンテンツ管理システム、メールクライアントは SVG を一貫性なくラスタライズするか、アップロードとして受け取りません。そのため、SVG を WebP のようなラスター形式に変換することが、グラフィックを共有または埋め込むための最も実用的な方法になることがよくあります。

WebP とは？

WebP は Google によって開発され、2010 年にリリースされたモダンなラスター画像形式です。VP8 動画コーデックから派生した圧縮技術を使用し、同等の視覚品質で JPG や PNG よりも 25〜35% 小さい画像ファイルを生成します。WebP は非可逆圧縮と可逆圧縮の両方、アルファチャンネルによる透過、アニメーション、ICC カラープロファイルをサポートしており、利用可能な最も高機能なラスター形式の一つです。Chrome、Edge、Firefox、Safari、Opera などすべての主要ブラウザでサポートされており、パフォーマンスが重要な Web 画像で広く使用されています。

WebP は小さなファイルサイズ、透過性、幅広い互換性を兼ね備えているため、モダンな Web 開発のデフォルト形式の一つとなっています。SVG を WebP に変換することで、SVG を受け付けないプラットフォームを含むどこにでも埋め込める自己完結型のラスターファイルを得られ、同時にファイルサイズを同等の PNG や JPG エクスポートよりはるかに小さく保つことができます。

SVG と WebP の比較

SVG と WebP は根本的に異なる目的で設計されています。SVG は図形を数学として保存するベクター形式であり、WebP はピクセルを保存するラスター形式です。下の表は、SVG と WebP の画像形式の主な違いをまとめたものです。

特徴	SVG	WebP
画像タイプ	ベクター（数学ベース）	ラスター（ピクセルベース）
発表年	2001	2010
スケーリング	無限にスケーリング可能、品質低下なし	固定解像度、拡大するとピクセル化
最適な用途	ロゴ、アイコン、イラスト、UI グラフィック	写真、複雑なラスター画像
透過	対応（固有）	対応（アルファチャンネル）
アニメーション	対応（SMIL/CSS/JS 経由）	対応（アニメーションフレーム）
ファイルサイズ（シンプルなグラフィック）	非常に小さい（テキストベース）	小さいが SVG より大きい
ファイルサイズ（写真）	不適切	優秀（非可逆または可逆）
コードで編集可能	可能（XML テキスト）	不可（バイナリ）
ブラウザサポート	すべてのモダンブラウザ	すべてのモダンブラウザ
プラットフォームアップロード	一貫性がない（拒否されることが多い）	広く受け入れられる

要するに、SVG はスケーラビリティ、編集性、シンプルなグラフィックのサイズで勝り、WebP は写真圧縮とプラットフォームの受け入れ度で勝ります。SVG から WebP への変換は、ベクターグラフィックを固定解像度のピクセル画像にラスタライズし、どこにでも埋め込み、アップロード、共有できるようにします。

SVG から WebP への変換を使う場面

SVG は優れた形式ですが、WebP にラスタライズする方が適している現実的な状況は数多くあります。プラットフォーム、サービス、ワークフローがベクターグラフィックではなくラスター画像を期待する場合はいつでも、SVG を WebP に変換することで SVG のデザイン品質と WebP の幅広い互換性の両方を得ることができます：

• プラットフォームへのアップロード。多くのソーシャルネットワーク、マーケットプレイス、フォームビルダー、CMS プラットフォームはセキュリティ上の理由で .svg のアップロードを拒否します。WebP はほぼどこでも受け入れられます。
• メールの埋め込み。ほとんどのメールクライアントは SVG をインラインでレンダリングできません。WebP 画像は Outlook、Apple Mail、Gmail などで確実に表示されます。
• 写真コンテンツ。SVG に埋め込まれたラスター写真や複雑なグラデーションが含まれる場合、WebP にエクスポートすると SVG のまま残すよりもはるかに小さなファイルが生成されることがあります。
• キャッシュと配信。CDN や画像 CDN は SVG よりも単一の WebP ファイルを予測可能に処理します。特にレスポンシブ画像のバリエーションを配信する場合に有効です。
• 古いアプリケーション。一部のレガシーな画像ビューアやエディタは SVG を開けません。WebP はモダンな画像エディタやビューアで広くサポートされています。
• ファビコンやアプリアイコン。固定解像度のラスターアイコンが必要な場合、WebP は小型で高品質なファイルを提供します。

元の SVG は編集可能なマスターファイルとして保管してください——いつでも任意の解像度で再エクスポートできます。共有、埋め込み、アップロード用のコンパクトで固定サイズのラスター画像が必要な場合に WebP エクスポートを使用してください。

SVG を WebP に変換する方法

このツールを使って SVG 画像を WebP に変換するのは数秒で完了し、すべてブラウザ内で行われます。アップロード、登録、インストールは不要です。ツールは data URL 経由で SVG を読み込み、SVG の固有サイズでキャンバスにラスタライズし、Canvas API を介してキャンバスを WebP に再エンコードします。次の 4 つの手順に従ってください：

1. SVG ファイルをアップロード。アップロードエリアをクリックするか、.svg ファイルをドラッグ＆ドロップします。画像はローカルでデコードされ、プレビューとして表示されます。
2. WebP の品質を調整。10% から 100% の品質スライダーを使用して、ファイルサイズと視覚品質のバランスを取ります。85% はほとんどのグラフィックに適したデフォルト値です。低い値はより小さなファイルを生成します。
3. WebP に変換。「WebPに変換」ボタンをクリックします。ツールは SVG をキャンバスにラスタライズし WebP として再エンコードし、元のファイルサイズと変換後のファイルサイズを並べて表示します。
4. WebP をダウンロード。「WebP をダウンロード」をクリックして変換されたファイルをデバイスに保存します。元の SVG はそのまま残ります。

すべてのステップは JavaScript を使用してブラウザ内でローカルに実行されるため、SVG 画像がサーバーにアップロードされることはありません。これにより変換は完全にプライベートで高速、機密性の高いグラフィックにも適しています。