SVG→Data URI変換（CSS背景用エンコード）
SVGコードを貼り付けると、CSSの background-image: url("data:image/svg+xml,...") にそのまま使えるData URIを生成します。外部ファイルを増やさずにアイコンや模様を埋め込めます。Base64化する文字列変換は Base64エンコード/デコード、ビットマップ画像の場合は 画像のBase64変換、SVGで作る繰り返し模様は CSSパターン背景ジェネレーター が便利です。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
使い方
- 「SVGコード」欄にSVGを貼り付けます。
- 「方式」でURLエンコード（軽量）かBase64を選びます。
- プレビューで見た目を確認します。必要なら「背景の配置指定も出力」にチェックします。
- 「CSSをコピー」または「Data URIをコピー」で結果を取り出します。
注意点
- URLエンコードは % # < > バックスラッシュ と引用符、日本語などの非ASCII文字だけをエスケープする方式で、Base64より短くなることがほとんどです。ただし文字列としては読みにくくなります。
- Base64方式は元のサイズの約1.33倍になり、gzipの圧縮も効きにくいため、SVGが小さい場合や互換性を優先する場合に向いています。
- xmlns（名前空間）が無いSVGは背景画像として表示されないため、自動で補います。XML宣言・DOCTYPE・コメントは取り除き、空白を詰めます。
- 出力はCSSの二重引用符 url("...") で囲む前提です。SVG内の二重引用符は単一引用符（または %22）に置き換えます。HTMLの属性にそのまま貼る場合は、& などのHTMLエスケープに注意してください。
- 背景画像として読み込まれたSVG内のスクリプトや外部リソースは実行・取得されませんが、色を変えたい場合は fill などをエンコード前に書き換えてください。
- すべての処理はブラウザ内で完結し、貼り付けたSVGがサーバーに送信されることはありません。
用語解説
Data URI
`data:image/svg+xml,...` のように、データそのものをURLの形で埋め込む方式です。別ファイルを取りに行かずに済み、CSSの`url()`や`<img src>`に直接指定できます。
パーセントエンコーディング
URLで使えない文字を `%23`（#）のように「%」と16進数で表す方式です。SVGのData URIでは `#` や `<` `>` など一部の文字だけを変換する最小限のエスケープが使われます。
xmlns
XMLの名前空間を示す属性で、SVGでは `xmlns="http://www.w3.org/2000/svg"` と書きます。画像として単体で読み込む場合は必須です。
よくある質問
URLエンコードとBase64はどちらを選ぶべきですか？
通常はURLエンコード（軽量）がおすすめです。SVGはテキストなので、Base64にするより短くなり、gzipもよく効きます。古い環境との互換性を優先したいときなどにBase64を選んでください。
CSSに貼ったのにSVGが表示されません。
SVGに xmlns="http://www.w3.org/2000/svg" が無いと背景画像として表示されません。このツールは自動で補いますが、width・height・viewBox が無いSVGは大きさが決まらず、background-size を指定しないと見えないことがあります。
SVGの中の「#」や「%」はどう扱われますか？
URLエンコード方式では「#」を %23、「%」を %25 に変換します。変換しないと、ブラウザがURLの一部と解釈してSVGが壊れるためです。Base64方式では変換は不要です。
背景に使ったSVGの色をCSSで変えられますか？
背景画像として読み込まれたSVGは外側のCSSの影響を受けないため、色はエンコード前にSVG内の fill や stroke で指定してください。
このページをシェア