データはサーバーに送信されますか？

いいえ。SVGの解析・変換はすべてブラウザ内で処理されます。

URLエンコードとBase64のどちらを選ぶべきですか？

URLエンコード推奨です。可読性が高く、Gzip圧縮時のファイルサイズもBase64より小さくなります。

見た目に影響しないメタデータやコメントのみを削除するため、描画結果は変わりません。

外部参照の画像はData URIに含まれないため、SVG単体で完結するデザインのみ対応しています。

はい。完全無料で、利用回数の制限もありません。

SVGを最適化する

Size（サイズ）

Repeat（繰り返し）

Position（位置）

背景色

SVG背景パターン CSSジェネレーターは、SVGファイルをブラウザ上で軽量化（最適化）し、CSSの background-image で直接使えるData URI形式のコードを自動生成するツールです。

SVGコードを貼り付けるかファイルをドロップするだけで、不要なメタデータの削除・URL安全エンコードを自動実行。生成されたCSSはそのままコピーして背景パターンとして利用できます。

画像ファイルがサーバーにアップロードされることは一切ありません。完全にブラウザ内で処理されるため、機密性の高いデザインデータも安全に扱えます。

SVGコードを直接貼り付けるか、SVGファイルをドラッグ＆ドロップします。ファイル選択も可能です。

「変換する」をクリックすると背景プレビューが表示されます。サイズ・リピート・背景色を調整して仕上がりを確認します。

生成されたCSSコードを📋ボタンでコピーし、スタイルシートに貼り付けるだけで完了です。

Data URI: ファイルをURLに直接埋め込む方式。data:image/svg+xml,... の形式でCSSに直接記述でき、追加のHTTPリクエストが不要です。
URLエンコード: SVGの特殊文字をURLセーフな形式に変換する方式。Base64より可読性が高く、Gzip圧縮時のサイズも小さくなります。
Base64: バイナリデータをASCII文字列に変換するエンコード方式。サイズが約33%増加しますが、あらゆる環境で安全です。
background-image: CSS要素の背景画像を指定するプロパティ。Data URIを使えば外部ファイルなしでSVG背景を適用できます。
SVG最適化: 不要なメタデータ（title, desc, metadata）、コメント、余白を削除してSVGファイルサイズを削減する処理です。

本ツールではJavaScriptの正規表現ベースで軽量なSVG最適化を行い、外部ライブラリに依存しません。

SVGのData URIにはURLエンコード方式とBase64方式がありますが、URLエンコードが推奨されます。理由は、HTTPレスポンスがGzip圧縮される場合、URLエンコードされたSVGテキストはBase64より高い圧縮率を実現するためです。

コメント除去、<title>・<desc>・<metadata>タグ除去、不要な属性（xmlns:xlink等）除去、連続空白の圧縮を行います。描画に影響する属性やパスデータは保持されます。

Q. データはサーバーに送信されますか？: A. いいえ。SVGの解析・変換はすべてブラウザ内で処理されます。
Q. スマートフォンでも使えますか？: A. はい。レスポンシブ対応済みで、スマートフォンからもご利用いただけます。
Q. URLエンコードとBase64のどちらを選ぶべきですか？: A. URLエンコード推奨です。可読性が高く、Gzip圧縮時のファイルサイズもBase64より小さくなります。
Q. 最適化でSVGの見た目が変わることはありますか？: A. 見た目に影響しないメタデータやコメントのみを削除するため、描画結果は変わりません。
Q. SVG内に外部画像が含まれる場合は？: A. 外部参照の画像はData URIに含まれないため、SVG単体で完結するデザインのみ対応しています。
Q. 無料で利用できますか？: A. はい。完全無料で、利用回数の制限もありません。

🎨

ドット・ストライプ・幾何学模様のSVGをCSSで敷き詰め。HTTPリクエスト0で高速表示を実現。

⚡

外部画像ファイルをData URIに置換し、HTTPリクエスト数を削減。PageSpeed改善に貢献。

📧

外部画像を読み込めないメールクライアントでも、Data URIなら背景を安全に表示。

🖨️

ビルドパイプラインに画像アセットを含めたくない場合に。CSS内ですべてが完結します。

CSS