Paste your
<svg>...</svg> code below
Try a sample:
Ready to encode
Paste SVG markup and click Encode// encode svg into css background-image data uri
Convert SVG markup into a CSS background-image data URI. Encode, optimize, and copy ready-to-use CSS for backgrounds, patterns, and icons.
<svg>...</svg> code belowReady to encode
Paste SVG markup and click EncodeCopy your <svg> markup into the input — inline SVGs work best when they include xmlns attribute.
URL encoding produces shorter output for simple SVGs. Base64 is safer for complex SVGs with special characters.
Click "Encode to CSS" then copy the generated background-image property or the raw data URI for use in your stylesheets.
cursor: url(...)This tool converts raw SVG markup into a background-image CSS property using a data URI. Instead of referencing an external .svg file, you embed the image directly into your CSS — eliminating an HTTP request and improving load performance.
A data URI is a way to embed file content directly inside a URL string. For SVG, it looks like background-image: url("data:image/svg+xml,..."). The browser decodes the URI and uses it as an image without needing a separate HTTP request.
URL encoding is generally preferred for SVG because it produces shorter output for simple graphics and is human-readable. Base64 produces consistent output regardless of SVG content, which makes it safer for complex SVGs that contain special characters or double-quotes.
Yes — when embedding SVG as a CSS background-image data URI, the SVG must include xmlns="http://www.w3.org/2000/svg" on the root element. Without it, browsers may refuse to render the image. This tool works best with complete, valid SVG markup.
Absolutely. The generated CSS property works perfectly with ::before and ::after pseudo-elements. Just add content: "", define a width and height, and set display: block.
There's no hard limit, but large SVGs (over ~32KB) encoded as data URIs can cause performance issues — some browsers cache external SVG files more efficiently. For complex illustrations, consider using an external file. For icons and simple patterns, data URIs are ideal.
Yes. SVG data URIs in CSS are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For IE11, Base64 encoding is more reliable than URL encoding, though IE11 itself is now end-of-life and rarely targeted.
An SVG to CSS Background encoder converts raw SVG markup into a format that can be embedded directly inside a CSS background-image property as a data URI. Instead of linking to an external .svg file, you encode the entire SVG into a self-contained string that a browser can decode and render inline — no extra HTTP request required.
This technique is widely used by frontend developers for custom backgrounds, repeating patterns, decorative pseudo-elements, and lightweight icon systems. It keeps your CSS self-contained and eliminates render-blocking asset requests for small graphics.
💡 Looking for premium SVG templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and design assets — worth checking out.
A data URI follows the format data:[mediatype][;encoding],data. For SVG, the media type is image/svg+xml, and the encoding is either URL-encoded characters or a Base64-encoded string. A complete CSS property looks like this:
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");URL encoding replaces unsafe characters like <, >, #, and " with their percent-encoded equivalents (%3C, %3E, etc.), resulting in output that is still partially human-readable. Base64 encoding converts the entire SVG string to an opaque alphanumeric blob but is universally safe across all parsers.
Both methods produce valid CSS background images, but they have different trade-offs:
URL Encoding is preferred for most use cases. It produces shorter output for simple SVGs, keeps the data partially readable for debugging, and avoids the ~33% size overhead that Base64 introduces. Modern browsers handle URL-encoded SVGs reliably. The key is to replace double quotes with single quotes inside the SVG before encoding, which avoids breaking the CSS string delimiters.
Base64 Encoding produces a fixed-size output regardless of the SVG's character content. It is safer when your SVG contains unusual Unicode characters, embedded scripts, or other content that might interfere with URL parsing. It is also the required method when embedding SVG data URIs inside HTML style attributes rather than external CSS files.
SVG data URIs work best for small, simple graphics — icons, geometric shapes, repeating tile patterns, and decorative elements. The sweet spot is SVGs under 2KB. For larger or more complex illustrations, external files are almost always the better choice because browsers can cache them independently and HTTP/2 eliminates most of the request overhead that once made data URIs attractive for larger assets.
For ::before and ::after pseudo-elements, data URIs are especially convenient. Setting a decorative bullet point or chevron icon as a CSS background image avoids the need to manage a separate icon file or use a font icon system:
li::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,...");
background-size: contain;
}Not all SVG files work correctly when embedded as data URIs. The SVG must include the xmlns namespace declaration on the root element: xmlns="http://www.w3.org/2000/svg". Without this, Chrome and Firefox will refuse to render the image. The SVG should also have a viewBox attribute defined so it scales correctly across different element sizes.
Avoid using double quotes for SVG attribute values when URL-encoding, as they can break the CSS string. Use single quotes instead — or let this tool handle the encoding automatically. Remove any XML declarations (<?xml version="1.0"?>) at the top, as these are unnecessary inside data URIs and add byte overhead.
Using SVG data URIs reduces the number of HTTP requests a page makes, which improves perceived performance especially on high-latency connections. Each data URI is parsed and decoded by the browser at render time, which adds a small CPU cost. For repeated use of the same SVG across many elements, external files cached in the browser will outperform repeated inline data URIs — the data URI is decoded fresh on each encounter if the CSS rule is duplicated.
A practical guideline: use data URIs for SVGs used in one or two places per page, and external files for SVGs reused across many elements or pages. This tool gives you the size of the encoded output so you can make an informed decision.
SVG as background-image data URIs is supported in all modern browsers. Chrome, Firefox, Safari, and Edge all handle both URL-encoded and Base64-encoded SVG data URIs correctly. The only edge case to be aware of is that some email clients do not support SVG at all — if you are building HTML emails, use raster images instead.