SVG to CSS Converter

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.

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.

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.

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.

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.

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.

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.

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.

Pick the URL wrapper helper. It hands you just the url() around a data:image/svg+xml payload, which is the plain svg to data uri with no background rule or class wrapped around it. The other four helpers add CSS on top of that same string.

It reads your markup and emits CSS text you paste into a stylesheet, so it works as an svg to code converter, not a tool that writes a new file to disk. Nothing downloads; the result is always a string for your CSS. That's why it suits build steps where you'd rather inline small art than ship extra requests.

Choose the Basic or Advanced background-image helper. Basic writes a single background-image line, while Advanced adds background-repeat, background-position, and background-size, so you can convert svg to background image that tiles or sits centered in one paste. Both point at the same encoded data URI.

No. It doesn't trace a PNG or JPG, so it won't convert image to svg and won't hand back its vector code from a raster file. It runs the other direction, taking svg markup you already have and encoding it for CSS. For raster tracing, run the picture through a vectorizer first, then bring the resulting svg here.

It isn't. There's no drawing canvas, so it works as neither an svg generator nor an svg creator, and it won't create svg image shapes for you. Design the icon in a vector editor, paste the markup, and the tool takes over from the encoding step onward.

The live preview paints your markup onto the checkered strip, so you get an svg to image view and, since pasting code makes it render, a bit of svg code to image converter behavior. It won't export a PNG though. Whatever you copy is CSS, never a raster file.

Yes. Before it builds the URI, it strips comments and collapses extra whitespace, so the svg to svg code it encodes is leaner than what you pasted. Feed it a messy svg image to svg code block and the byte and KB readout reflects the tidied version, not the raw input.

Not really. Inline svg already lives inside your HTML, so the tool lifts that svg out and encodes it for CSS rather than screenshotting an HTML element into a fresh vector. If you have the markup, you're set; if you only have a rendered block, grab the svg source first before you try html to svg here.

Small, flat svg images embed best: icons, chevrons, checkboxes, and repeating patterns. Because the svg image format is plain XML text, it travels well as a data URI, unlike a binary PNG, and the tool expects real svg image code that opens with an svg tag. Keep detailed or photographic art as linked files.