SVGエンコードツール【Base64 / URLエンコード変換でCSS背景画像を作成】

SVGコードを貼り付けるか、SVGファイルをドロップ／選択すると、CSSやHTMLでそのまま使える data URI をリアルタイムで生成します。Base64 / URLエンコードの両方に対応しています。

1. SVG入力

ファイル未選択

※ 大きなSVGファイルはコードも長くなり、CSSが重くなる場合があります。

2. エンコード設定

エンコード方式

Base64（デフォルト・一般的で互換性が高い） URLエンコード（%3Csvg… 形式・軽量になりやすい）

出力構文

background-image: url(‘…’);（CSS用・推奨） data:image/svg+xml…（データURIのみ・img要素のsrcなどに）

3. 変換後コード

※ コピーボタンで全体をコピーし、CSSファイルやstyle属性・img要素などに貼り付けて使用できます。

変換後の背景画像プレビューがここに表示されます

元ファイル / 入力サイズ: –

変換後コード文字数: –

この「SVGエンコードツール」は、SVG画像をBase64またはURLエンコードで扱いやすい文字列データに変換するWEBツールです。

WebページのCSSやHTMLに直接埋め込みたいときに便利です。

このツールでできること

このツールでは、お手持ちのSVG画像（ベクター画像）をWebサイト上で使えるさまざまな形式に変換できます。

2種類のエンコード方式に対応 一般的な「Base64」形式だけでなく、よりファイルサイズが軽量になりやすい「URLエンコード（パーセントエンコーディング）」形式にも対応しています。
CSS形式でコードを出力 CSSファイルにそのまま貼り付けられる background-image: url(...) の形式でコードが生成されます。src 属性用のコードのみを取得することも可能です。
リアルタイムプレビュー 変換されたコードが実際に画像としてどう表示されるかをその場で確認できます。背景色は「白・黒」から切り替えられるため、白いアイコンなどの視認性も確保できます。

「SVG入力」エリアに、変換したいSVGファイルをドラッグ＆ドロップしてください。または、SVGファイルのソースコード（<svg>... で始まるテキスト）を直接貼り付けることも可能です。入力と同時に変換処理が始まります。

「エンコード設定」エリアで、用途に合わせて形式を選択します。

エンコード方式：
- Base64（デフォルト）：最も一般的で互換性が高い形式です。
- URLエンコード：Base64よりサイズが小さくなる傾向があり、軽量化を重視する場合におすすめです。
出力構文：
- CSS用（推奨）： CSSの background-image プロパティとしてそのままコピペできる形式です。
- データURIのみ： img タグの src 属性など、URL部分だけが必要な場合に使用します。

「変換後コード」エリアに生成された文字列が表示されます。「コピー」ボタンを押してクリップボードに保存し、ご自身のWebサイトのCSSファイルやHTMLに貼り付けて使用してください。

Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略です。拡大・縮小しても画質が劣化しない画像形式で、Webアイコンやロゴによく使われます。

どちらも画像を「文字データ」に変換して、HTMLやCSSの中に直接書けるようにする技術（Data URIスキーム）です。

Base64： バイナリデータを64種類の英数字で表現します。互換性が高いですが、データサイズは元の約1.3倍に増えます。
URLエンコード： %3C のように文字を記号化します。SVGの場合、Base64よりもファイルサイズが小さくなることが多く、Gzip圧縮との相性も良いため、最近のWeb制作ではこちらが好まれることもあります。