SVG Encoder
Paste your SVG code to get URL-encoded, Base64, or data URI output for CSS backgrounds.
Chrome
Firefox
Safari
Edge
IE11+
SVG Input
0 bytes
Encoded Output
Encoded output will appear here...
Encoded output will appear here...
background-image: url("...");
background-image: url("...");
<img src="..." />
<img src="..." />
<object type="image/svg+xml" data="..."></object>
Output will appear here...
Output will appear here...
Output will appear here...
Decode
Preview
Background:
SVG preview will appear here
Alterations
Auto-add xmlns
Required for data URIs
Minify (one-liner)
Remove newlines & extra spaces
Convert to single quotes
Use ' instead of " in SVG
Remove fill colors
Strip all fill attributes
Remove stroke colors
Strip all stroke attributes
Line Endings
Character Set
Browser Support
URL Encoded Data URI
All Browsers
Base64 Data URI
All Browsers
Unencoded SVG Data URI
Webkit Only
SVG in CSS background
IE9+
SVG in CSS mask
Modern Only
Why Encode SVG?
SVG can be used directly in CSS via data URIs, but without proper encoding, it only works in Webkit-based browsers (Chrome, Safari). URL encoding ensures your SVG backgrounds work across all browsers including Firefox, Edge, and IE11+.
URL Encoding vs Base64
URL Encoding (Recommended)
- + Smaller file size (~30% smaller)
- + Human readable
- + Easy to edit
- + Better compression
Base64 Encoding
- + Universal compatibility
- + No special character issues
- - Larger file size
- - Not human readable
Optimized URL Encoding
This tool uses an optimized encoding that only encodes characters that are unsafe in data URIs.
Characters like <, >, #, and % are encoded,
while safe characters remain unencoded for smaller output.
// Characters that get encoded:
% → %25 | # → %23 | { → %7B | } → %7D | < → %3C | > → %3E