SVG から CSS 変換ツール
SVG コードを CSS background-image data URI に変換。小さいサイズの UTF-8 または互換性の高い Base64 エンコーディングを選択。
SVG 入力0 文字
SVG プレビュー
SVG プレビューがここに表示されます
なぜ CSS で SVG を使うのか？
SVG を data URI として CSS に直接埋め込むことで HTTP リクエストを 1 つ削減できます。小さなアイコンや装飾要素に最適で、ページ読み込みパフォーマンスを向上させ、サーバーとの往復を減らします。
UTF-8 vs Base64 エンコーディング
- - UTF-8：出力が小さく、人間が読みやすく、最新ブラウザに最適
- - Base64：約 33% 大きいが、古いツールとの互換性が高い
- - ほとんどの場合 UTF-8 を推奨
オンラインで SVG を CSS 背景画像に変換する方法
- 1.エンコーディング形式を選択：小さいサイズの UTF-8 または互換性の高い Base64。
- 2.入力エリアに SVG コードを貼り付けます。SVG のプレビューが即座にレンダリングされます。
- 3.data URI と完全な CSS コードが入力の下にリアルタイムで生成されます。
- 4.URI をコピーまたは CSS をコピーをクリックして結果をクリップボードにコピーします。
FAQ
変換により SVG の品質に影響がありますか？
いいえ。SVG はベクター形式なので、data URI に変換しても任意の解像度で完全な品質が維持されます。SVG コードは CSS に埋め込むためにエンコードされるだけで、ラスタライズされません。
すべてのブラウザで SVG data URI を使えますか？
はい。SVG data URI は Chrome、Firefox、Safari、Edge を含むすべてのモダンブラウザでサポートされています。UTF-8 エンコーディングは IE9+ を含む SVG 対応のすべてのブラウザで動作します。
SVG data URI にサイズ制限はありますか？
モダンブラウザに厳密なサイズ制限はありませんが、32KB を超える data URI はパフォーマンスに影響する可能性があります。大きくて複雑な SVG の場合は、外部ファイルの使用や HTML 内でのインライン SVG を検討してください。
SVG データはサーバーに送信されますか？
いいえ。すべてのエンコーディングと変換はブラウザ内で JavaScript を使用して行われます。SVG コードがアップロードや保存されることはありません。