デザイン・Web制作

SVG → CSS background 変換ツール

1MBまでの静的SVGをCSS background-image用data URLへ可逆変換。URI・Base64、サイズ比較、縦横比を保つ64〜1024px PNG出力に対応。

登録不要
エンコード方式

静的SVGのみ・入力上限1MB

このツールについて問い合わせる →

SVG → CSS background 変換ツールについて

SVGをCSSに埋め込むメリット

SVGをdata: URLとしてCSSへ埋め込むと、画像ファイルへの別リクエストを不要にできます。一方で画像データはCSSの一部になるため、常に高速になるとは限りません。転送量、キャッシュ単位、再利用回数を計測して選択してください。

  • リクエスト削減: 外部ファイル参照が不要になり、CSSだけで画像を表示
  • キャッシュ単位: CSSファイルと同じ単位で更新・キャッシュされる
  • インライン利用: HTMLに直接SVGを書かずにスタイルシートで管理

URIエンコードとBase64の違い

本ツールでは2つのエンコード方式を選択できます。

  • URIエンコード: UTF-8のSVGを可逆なパーセントエンコードへ変換します。CSS文字列に生の改行・引用符・%・#を残しません。
  • Base64: UTF-8バイト列をBase64へ変換します。Base64本体は元バイト列のおよそ4/3になり、さらにdata URLの接頭辞が付きます。

どちらが短いかはSVGの内容で変わるため、画面に表示されるdata URLのバイト数で比較できます。

使い方

  1. SVGコードをテキストエリアに貼り付け(またはサンプルを投入)
  2. エンコード方式(URI / Base64)を選択
  3. 生成されたCSS(background-imageプロパティ)をコピーしてスタイルシートに貼り付け
  4. 必要なら64〜1024pxの正方形PNGをダウンロード

「前後の空白を除去」は入力全体の先頭・末尾だけを整えます。text要素などの意味を変えないため、SVG本文の改行や要素間空白は削除しません。PNGは縦横比を保って正方形へ収め、余白は透明になります。

変換対象は静的SVGです。スクリプト、イベント属性、外部参照、埋め込み画像、XML entityは拒否します。入力上限は1MB、markupは2,000個、SVG内CSSは16KB、入れ子は256階層です。入力したSVGの変換とPNG化はブラウザ内で行います。

よくある質問

Q. 大きなSVGファイルでも使えますか?
本ツールの入力上限は1MBです。ただしdata URLをCSSへ埋め込むとCSSの転送・解析・キャッシュ単位にも影響します。大きい画像や複数ページで再利用する画像では、外部ファイルとの実測比較をおすすめします。
Q. SVGの色をCSSで変えられますか?
CSS backgroundのSVGは画像文書として扱われるため、外側要素のCSS変数やcurrentColorをインラインSVGと同じようには継承しません。色を外側から制御したい場合は、信頼できるSVGをHTMLへインライン配置する設計を検討してください。
Q. すべてのブラウザで動作しますか?
data URLとCSS background-imageに対応するブラウザで利用できます。ブラウザや利用先にはdata URLの長さ・CSP・SVG画像モードなどの制約があるため、対象環境の実機確認が必要です。
このツールを評価
—(0件)