デザイン・Web制作
SVG → CSS background 変換ツール
SVGコードをCSS background-imageで使えるdata:URIに変換。URIエンコード・Base64を選択可能。コピペですぐにCSSに組み込めます。
AD
AD
SVG → CSS background 変換ツールについて
SVGをCSSに埋め込むメリット
SVGをdata:URIとしてCSSに直接埋め込むと、画像リクエストを削減できます。アイコンや小さなイラストに最適で、HTTPリクエストが減る分ページの読み込みが高速化します。
- リクエスト削減: 外部ファイル参照が不要になり、CSSだけで画像を表示
- キャッシュ効率: CSSファイルと一緒にキャッシュされる
- インライン利用: HTMLに直接SVGを書かずにスタイルシートで管理
URIエンコードとBase64の違い
本ツールでは2つのエンコード方式を選択できます。
- URIエンコード: SVGの特殊文字(
<,>,#)のみをエンコード。通常はBase64より出力が短くなります。推奨。 - Base64: バイナリ→テキスト変換。すべてのブラウザで安全に動作しますが、約33%サイズが増加します。
使い方
- SVGコードをテキストエリアに貼り付け(またはサンプルを投入)
- エンコード方式(URI / Base64)を選択
- 生成されたCSS(
background-imageプロパティ)をコピーしてスタイルシートに貼り付け
SVG圧縮オプションをオンにすると、不要な空白・改行を自動除去してdata:URIのサイズを最小化します。
よくある質問
- Q. 大きなSVGファイルでも使えますか?
- 技術的には可能ですが、data:URIが大きくなるとCSSファイルのサイズが膨大になります。目安として5KB以下のSVGが推奨です。大きなSVGは外部ファイルとして読み込む方がパフォーマンス上有利です。
- Q. SVGの色をCSSで変えられますか?
- data:URIに埋め込んだSVGはCSS変数やcurrentColorでの動的な色変更ができません。色を変えたい場合はHTMLにインラインSVGとして埋め込むか、CSS filterを使う方法があります。
- Q. すべてのブラウザで動作しますか?
- はい。data:URI形式のSVG背景画像はすべてのモダンブラウザ(Chrome、Firefox、Safari、Edge)で対応しています。IE11でも基本的に動作します。
このツールを評価
—(0件)