SVG to CSS Background
Convert SVG markup into a CSS background-image data URI with a live preview.
Free & unlimited
Encoding
Try a sample
SVG code
Size
Repeat
Position
Preview
Background
Original 0.1 KB → Encoded 0.2 KB (123%)
CSS output
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Paste or upload SVG
Paste SVG markup directly or upload an SVG file from your device.
- 2
Preview the background
See a live preview of how the SVG looks as a CSS background-image.
- 3
Adjust options
Set background-size, repeat, and position properties to fine-tune the result.
- 4
Copy the CSS
Copy the generated CSS rule including the data URI encoded SVG.
- Inline SVG backgrounds eliminate an extra HTTP request, improving page load time.
- URL-encode special characters like #, <, and > to avoid breaking the data URI.
- Keep SVGs under 5 KB for best performance - larger images are better served as separate files.
- Remove unnecessary metadata and whitespace from the SVG before converting to reduce CSS size.
- Automatic URL encoding of SVG for safe use in CSS
- Live preview with configurable background-size and repeat
- Minifies SVG before encoding to reduce output size
- Generates both data URI and base64 variants
- Copy-ready CSS with vendor prefixes if needed
- Embed a simple icon or pattern as a CSS background without extra HTTP requests
- Add decorative SVG backgrounds to buttons or cards in a stylesheet
- Create repeating SVG patterns for page backgrounds
- Inline small brand logos in email HTML where external images may be blocked
UTF-8 data URIs are generally smaller than base64 for SVG. Base64 adds roughly 33% overhead.
Yes. Data URI SVG backgrounds are supported in all modern browsers including Chrome, Firefox, Safari, and Edge.
Technically no hard limit, but data URIs over 32 KB may cause performance issues in some browsers. Keep SVGs small.