画像 → SVG

SVG とは？

SVG（Scalable Vector Graphics）は、2001 年に World Wide Web Consortium（W3C）が標準化した XML ベースのベクター画像形式です。JPG、PNG、WebP などのラスター形式が画像を色付きピクセルのグリッドとして保存するのとは異なり、SVG は XML タグとしてエンコードされた数学的命令で形状、パス、テキスト、グラデーションを記述します。画像がピクセルではなく幾何学で定義されるため、SVG は 16×16 のファビコンから看板まで、あらゆるサイズに拡大縮小でき、品質を損なわず、ファイルサイズも増加しません。

すべてのモダンブラウザが SVG をネイティブにレンダリングでき、SVG ファイルは任意のテキストエディタで手動編集したり、Adobe Illustrator、Figma、Inkscape、Sketch などのベクターデザインツールで開くことができます。この形式はインタラクティブ性、アニメーション、スクリプト、CSS スタイルにも対応しており、モダン Web でのアイコン、ロゴ、イラスト、チャート、データ可視化によく使われます。

画像を SVG に埋め込む理由

SVG は本質的にベクター形式ですが、SVG 仕様では <image> 要素を通じてラスター画像を SVG ドキュメント内に埋め込むことも許可されています。ラスターデータは Data URL（通常は Base64 エンコードされた PNG または JPEG）としてエンコードされ、href 属性を通じて参照されます。つまり、写真、スクリーンショット、ラスターグラフィックを SVG コンテナで包み、単一の自己完結型 .svg ファイルとして生成できます。

画像を SVG に埋め込む実用的な理由はいくつかあります。最も一般的なのは、画像を SVG のみの機能（スケーラブルな寸法、ベクターオーバーレイ、マスク、フィルター、クリップパス、アニメーション、インタラクティブ性）と一緒にバンドルすることです。また、単一のポータブルファイルを生成でき、HTML に直接インライン展開、単一の HTTP リクエストで送信、外部 URL に依存しない自己完結型アセットとして共有できます。

画像埋め込み SVG

ラスター画像を埋め込んだ SVG は、両方の長所を組み合わせます。外側の SVG はスケーラブルな XML ベースのコンテナを提供し、どのブラウザ、画像ビューア、エディタでも開けます。内側の <image> 要素は実際のピクセルデータを Data URL として保持するため、ファイルは完全に自己完結しており、壊れる可能性のある外部依存関係はありません。生成された SVG はサイズ変更、CSS でのスタイリング、SMIL や JavaScript でのアニメーション、他のベクター要素と一緒にの編集が可能です。

PNG 埋め込み形式を選ぶと、埋め込み画像は完全なアルファチャンネルの透過性とロスレス品質を保持します。JPEG 埋め込み形式を選ぶと、写真コンテンツに対して JPEG 圧縮の方が効率的なためファイルは通常小さくなりますが、透過性は失われ、埋め込み画像は非可逆になります。ソース画像の内容に最も適したオプションを選んでください。

画像 → SVG 変換を使う場面

ラスター画像を画像埋め込み SVG に変換すると便利な実用的なシナリオがいくつかあります：

• 自己完結型の納品物。スクリーンショットや写真を SVG 内に包み、外部アセットなしで任意のブラウザで開ける単一ファイルとして共有できます。
• スケーラブルな画像コンテナ。SVG の width と height 属性を使って、ラスター画像をレスポンシブレイアウトでスケーラブルな要素のように振る舞わせます。
• ラスター背景上のベクターオーバーレイ。写真の上に SVG のテキスト、図形、パスを追加しながら、すべてを 1 つのドキュメントに保持できます。
• 単一アセットの HTTP リクエスト。画像を SVG 内に埋め込み、その SVG を HTML にインライン展開することで、ラスターアセットの個別ネットワーク往復を削除します。
• メールやドキュメントへの埋め込み。画像埋め込み SVG は SVG 対応エディタに挿入でき、ビューア間で一貫してレンダリングされます。
• アニメーションとインタラクティブ性。SVG のネイティブ機能を使って、埋め込み画像に SMIL アニメーション、CSS 変換、JavaScript イベントハンドラを適用できます。

スケーラビリティや SVG 機能が不要な純粋な写真コンテンツには、通常の JPG、PNG、WebP ファイルの方が SVG ラップ版よりも適しています。Base64 エンコードのオーバーヘッドで後者の方が大きくなるためです。

画像を SVG に変換する方法

このツールを使って画像を SVG に変換するのは数秒で完了し、すべてブラウザ内で行われます。アップロード、登録、インストールは不要です。ツールは画像をデコードし、PNG または JPEG の Data URL として再エンコードして、SVG ドキュメント内に包みます。次の 4 つの手順に従ってください：

1. 画像をアップロード。アップロードエリアをクリックするか、.jpg、.png、.webp、.gif、.bmp、.svg ファイルをドラッグ＆ドロップします。画像はローカルでデコードされ、プレビューとして表示されます。
2. 埋め込み形式を選択。透過付きのロスレス品質には「PNG 埋め込み」を、透過が不要でより小さなファイルには「JPEG 埋め込み」を選択します。
3. SVG に変換。「SVGに変換」ボタンをクリックします。生成された SVG コードが結果ボックスに表示され、確認やコピーができます。
4. コピーまたはダウンロード。「コピー」で SVG コードを HTML やエディタに貼り付けるか、「.svg をダウンロード」で自己完結型の SVG ファイルとして保存します。

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