CSS Output
Your encoded CSS will appear here.
Browser support
CSS helpers
How to use
01
Paste your SVG markup
Drop the full <svg> element into the input box, or click the Sample button to load a demo checkmark. Clear resets the field when you want to start over.
02
Pick encoding and a CSS helper
Choose Modern (URL-encoded, smaller and readable) or Legacy (base64 for IE9+). Then select a wrapper under CSS helpers: URL wrapper, basic or advanced background-image, CSS bullets, or Inside class.
03
Check the preview and copy
Your graphic renders over a checkered preview strip, and the Data URI size in KB appears under the output. Click Copy CSS once it looks right.
Why SVG to CSS Converter
- Embed SVGs directly in CSS as Data URIs — one fewer HTTP request per icon or background.
- Modern URL-encoding keeps the output readable and ~33% smaller than base64.
- Legacy base64 mode for IE9+ and maximum compatibility.
- Five output formats: bare url(), basic and advanced background-image, list bullets, or a complete CSS class.
- Live preview renders your SVG so you can confirm it before copying.
- Runs entirely in your browser — your SVG never leaves your machine.
Common questions
What's the difference between Modern and Legacy SVG encoding?
Modern mode percent-encodes only the characters that break URLs, so the output stays human-readable and roughly a third smaller. Legacy mode wraps the whole SVG in base64, which survives ancient engines like IE9 but hides the markup and inflates the size.
Why put an svg data uri in CSS instead of linking a file?
The graphic arrives with the stylesheet, removing one request per icon and any flash of missing imagery. That trade is the entire point of an svg data uri generator: it pays off for small, frequently repeated art like bullets, arrows, and background patterns.
How do I use inline svg in css for list bullets?
Pick the CSS bullets helper and the tool wraps your encoded graphic in a list-style-image declaration. Apply it to ul or li and the browser swaps the default disc for your artwork. Keep the SVG tiny, around 8 to 16 pixels, so it aligns with the text.
Does the svg need the xmlns attribute to convert?
Yes. Inside a data URI, browsers refuse to render SVG that lacks xmlns="http://www.w3.org/2000/svg", even though the same markup works when inlined in HTML. The built-in sample shows the correct form if you're unsure what to include.
Why can't I recolor an svg after it's been encoded?
Not from CSS; the fill values are baked into the data URI, and currentColor doesn't reach into background images. Either encode one variant per color, or use the URI with mask-image and drive the color through background-color on the element.
Is base64 or URL-encoding smaller for svg in css?
URL-encoding wins, typically by around 33 percent, because base64 expands every 3 bytes into 4 characters. The size readout under the output updates when you switch modes, so you can compare both numbers for your exact file.
Why isn't my svg previewing in the converter?
The input has to start with an actual <svg> tag; plain paths, HTML, or truncated markup won't render. Check for unclosed tags and stray characters before the opening tag. The output pane shows a hint when the pasted text doesn't look like SVG.
Should I optimize the svg before converting it to CSS?
Yes. The tool strips comments and collapses whitespace, but it won't remove editor metadata, hidden layers, or excessive path precision. Run the file through SVGO first; a smaller input means a smaller data URI and a lighter stylesheet.