SVG CSS Background Generator
SVGファイルをCSSの background-image 向けData URIに一発変換。
不要なタグを削除し最適化、HTTPリクエスト削減に貢献します。
SVG Input
Drop SVG file here
About SVG CSS Background Generator
「SVG 背景パターン CSSジェネレーター」は、ベクター画像であるSVGファイルのコードを、CSSの background-image プロパティで直接読み込める形式（Data URI）に変換する無料のデベロッパーツールです。
画像ファイルをサーバーにアップロードしてURLで参照する通常の手法とは異なり、CSSファイル内に画像データを直接埋め込むことで、追加のHTTPリクエストを削減し、Webページの表示速度（PageSpeed）の向上に貢献します。
本ツールは変換と同時に、表示に不要なコメントやメタタグを自動的に削除（最適化）するため、埋め込みによるファイルサイズの肥大化も最小限に抑えられます。すべての処理はブラウザ上で安全に行われます。
How to use
SVGコードの入力
入力欄にSVGのコード（<svg>...</svg>）を直接貼り付けるか、お手元のSVGファイルをドラッグ＆ドロップしてください。
プレビューの確認と調整
自動的にプレビューが表示されます。必要に応じて背景色、サイズ（表示倍率）、繰り返しの有無（repeat）を設定します。
CSSコードのコピー
出力エリアに表示された background-image: url("data:image/..."); 等を含むCSSコードをコピーして利用します。
Glossary
- Data URI (データURIスキーム)
- 画像などのファイルデータを文字列に変換し、URLの代わりに直接記述する手法です。
data:image/svg+xml,...のような形式になります。 - URLエンコード
- SVG内の特殊文字（<、>、# など）を
%3Cなどの形式に変換する方式です。SVGはテキストベースのため、Base64に比べてファイルサイズが増加しにくい特徴があります。 - Base64
- バイナリデータを一定の規則で文字列（A-Z, a-z, 0-9 など）に変換する方式です。変換後のサイズは元の約1.33倍（33%増）になります。
- SVGの最適化 (SVGO等)
- IllustratorやFigmaから書き出したSVGには、エディタ専用の不要なタグや改行、コメントが多く含まれています。これらを取り除き軽量化するプロセスです。
よくある質問 (FAQ)
- Q.データはサーバーに送信されますか？
- いいえ。SVGの最適化・エンコード・変換はすべてお使いのブラウザ上で実行されます。外部サーバーへのファイルやデータの送信は一切ありません。
- Q.URLエンコードとBase64のどちらを選ぶべきですか？
- 基本的には「URLエンコード」を推奨します。SVGはテキストベースのため、サーバー側でGzip/Brotli圧縮される環境であれば、Base64（ファイルサイズが強制的に約33%増加する）よりもURLエンコードの方が最終的なネットワーク転送量が小さくなります。
- Q.最適化するとSVGの見た目は変わりますか？
- いいえ、見た目に影響を与えない不要なデータ（コメント、エディタ独自のメタタグ、
<title>タグなど）のみを正規表現で安全に削除するため、描画結果は変わりません。 - Q.SVGに外部画像が含まれている場合は？
- 外部参照（URLリンク）の画像（PNG/JPG等）が内部に含まれているSVGは、Data URIに変換しても正常に表示されない場合があります。パスやポリゴンのみで構成されたベクターデータでの利用を想定しています。
Use Cases for SVG CSS Backgrounds
背景パターンの作成
ドット、ストライプ、幾何学模様などのシームレスなSVGパターンを背景に敷き詰める（repeat）用途に最適です。解像度に依存せず常に綺麗に表示されます。
パフォーマンスの向上
小さなアイコンやロゴを背景画像として使う場合、画像を別ファイルとして読み込む際のHTTPリクエストを削減し、ページのロード時間を短縮できます。
レスポンシブなアイコン
リストの箇条書きのマーク（::before 擬似要素など）としてSVGアイコンをCSSに埋め込むことで、どのデバイスでもシャープに描画されます。
HTMLメールのコーディング
外部画像の読み込みがブロックされがちなHTMLメールにおいて、特定のクライアント向けにインラインで装飾を描画するハックとして利用されることがあります。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.