SVG を CSS の background-image に
どんな SVG も、エンコードした data URI としてスタイルシートに埋め込めます。
またはファイルをドロップ / 下にコードを貼り付け
CSS ルール
出力はここに表示されます
使い方
- 1SVG コードを貼り付けるか、.svg ファイルをドロップします。
- 2background-image ルールの中に URL エンコードされます。
- 3その CSS スニペットをスタイルシートにそのままコピーします。
無料・登録不要・透かしなし —— すべてブラウザー内でローカルに動作するため、ファイルが端末を離れることはありません。
よくある質問
なぜ base64 ではなく URL エンコードなのですか？
URL エンコードした SVG のほうが小さく、CSS 内でも人が読める形のまま残ります。お好みなら base64 も選べます。
SVG を CSS に埋め込むのはどんなときですか？
小さな装飾アイコンやパターンのときです —— HTTP リクエストを 1 つ節約できます。大きな図版はファイルのままのほうが適しています。