How do I use an SVG as a CSS background image?

Percent-encode the SVG markup, put data:image/svg+xml;charset=utf-8, in front of it and wrap the result in url() in a background-image declaration. Paste your SVG here and the tool builds that line, escaping the single and double quote characters so either quote style works.

Why does my SVG background not show?

The usual causes are a missing or wrong xmlns on the root svg element, which MDN says is required on the outermost svg element of an SVG document, and markup that is cut off before the closing tag. The tool adds a missing xmlns and rejects a wrong one or an unclosed root. Colors set by the page, such as currentColor, do not reach inside an SVG used as an image, so set fill and stroke in the markup.

Does the converter output base64?

Yes, when you pick Base64 under Encoding; URL-encoded is the default. The page prints both lengths. For the red circle example the URL-encoded URI is 219 characters and the Base64 one 170, because this encoder turns every space, quote and angle bracket into three characters. The URL-encoded form keeps tag names and colors readable, so you can still edit a fill by hand. RFC 2397 allows a data: URL to carry either form.

What happens if my SVG is too long?

Above 100,000 characters the tool shows the length of your markup and asks you to convert up to 100,000 characters at a time, and builds no declaration. Large SVGs with embedded images are better kept as a separate .svg file; RFC 2397 says the data: scheme is only useful for short values.

What is the .element rule in the full example?

A placeholder: .element is not a class the tool made for you. It uses the same URI with no-repeat, contain and center, so rename the selector to your own.

SVG to CSS Background Converter

Convert SVG markup to a CSS background-image data URI, URL-encoded or Base64. Adds a missing xmlns, rejects non-SVG input, gives url() or inline-style output. How it works

SVG Code

Paste one SVG element or open an .svg file, up to 100,000 characters. The xmlns attribute is added to the root element if it is missing.

Output Format

url()Inline Style

Encoding

URL-encodedBase64

Enter SVG code above to generate CSS background data URI.

About the SVG to CSS Background Converter

To use an SVG as a CSS background, percent-encode its markup after data:image/svg+xml;charset=utf-8, and put it inside background-image: url('…'). This converter does that for one SVG element of up to 100,000 characters, adds the xmlns attribute to the root when it is missing, and stops with a message when the markup is not an SVG. A Base64 option writes data:image/svg+xml;base64, instead, and the page shows the length of both.

What the converter does with each kind of input

Input	Result
Text that is not SVG: hello	This is not an SVG document. The markup must start with an <svg> element (an XML declaration or comment before it is fine).
An unclosed root: <svg viewBox="0 0 1 1">	The <svg> element is not closed. The markup must end with </svg>.
A root with xmlns="http://example.com"	The root xmlns is "http://example.com". An SVG image needs xmlns="http://www.w3.org/2000/svg".
A closed root without xmlns	Accepted; xmlns is added to the root
A closed root with the SVG xmlns	Accepted unchanged

The messages are the ones the tool shows. An XML declaration, comments and a DOCTYPE before the root are dropped before the check.

How to use this tool

Paste one SVG element, from <svg to </svg>, or open or drop a .svg file.
Choose url() output (a declaration for a stylesheet) or Inline Style output (the same declaration inside a style="…" attribute), and URL-encoded (the default) or Base64.
Check the preview, then copy the CSS declaration or the full .element example.

Frequently asked questions

How do I use an SVG as a CSS background image?: Percent-encode the SVG markup, put data:image/svg+xml;charset=utf-8, in front of it and wrap the result in url() in a background-image declaration. Paste your SVG here and the tool builds that line, escaping the single and double quote characters so either quote style works.
Why does my SVG background not show?: The usual causes are a missing or wrong xmlns on the root svg element, which MDN says is required on the outermost svg element of an SVG document, and markup that is cut off before the closing tag. The tool adds a missing xmlns and rejects a wrong one or an unclosed root. Colors set by the page, such as currentColor, do not reach inside an SVG used as an image, so set fill and stroke in the markup.
Does the converter output base64?: Yes, when you pick Base64 under Encoding; URL-encoded is the default. The page prints both lengths. For the red circle example the URL-encoded URI is 219 characters and the Base64 one 170, because this encoder turns every space, quote and angle bracket into three characters. The URL-encoded form keeps tag names and colors readable, so you can still edit a fill by hand. RFC 2397 allows a data: URL to carry either form.
What happens if my SVG is too long?: Above 100,000 characters the tool shows the length of your markup and asks you to convert up to 100,000 characters at a time, and builds no declaration. Large SVGs with embedded images are better kept as a separate .svg file; RFC 2397 says the data: scheme is only useful for short values.
What is the .element rule in the full example?: A placeholder: .element is not a class the tool made for you. It uses the same URI with no-repeat, contain and center, so rename the selector to your own.

When to use it

Use it to put an icon or pattern straight into a stylesheet as a background image, with no separate file to host. Paste one <svg> element, up to 100,000 characters, or open or drop a .svg file of that size, and choose url() output (a declaration for a stylesheet) or inline-style output (the same declaration inside a style attribute). The tool returns a one-line background-image declaration, a placeholder .element rule that adds no-repeat, contain and center, and a preview. Markup it cannot use gets a message instead of a declaration; the table on this page lists the common ones.

How the SVG becomes a CSS background

The tool trims the markup, drops a leading XML declaration, comment or DOCTYPE, and adds xmlns="http://www.w3.org/2000/svg" to the root when it is missing, and says so. MDN notes the attribute is required on the outermost svg element of an SVG document. The markup is then percent-encoded with encodeURIComponent, with ' and " also escaped, and prefixed with data:image/svg+xml;charset=utf-8,. With Base64 the UTF-8 bytes are Base64-encoded behind data:image/svg+xml;base64, instead; for the red circle example that is 170 characters against 219 URL-encoded.

Example: in a complete element, the opening tag <svg viewBox="0 0 10 10"> becomes %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E after the namespace is added. Page styles do not reach inside an SVG used as an image, so set fill and stroke in the markup; currentColor will not pick up the page's text color. The checks cover the outline only (an <svg> root, closed, with the right namespace): the tool cannot tell whether the SVG draws anything, so look at the preview.

Fun Fact: RFC 2397 says a data: URL with no media type is read as text/plain;charset=US-ASCII. The image/svg+xml at the front of the URI is what tells the browser the text is an image.

Related Tools

View all tools

Dev

SVG Code Viewer

Paste SVG code to preview it as an image with scripts, event handlers and outside links removed, list its colors and elements, minify it or export React TSX.

CSS

SVG Pattern Generator

Make a seamless SVG pattern tile of dots, squares, plus signs, stripes, checkers, hexagons or triangles; copy CSS with background-size or save SVG or PNG.

CSS

SVG Blob Generator

Make an organic SVG blob: set complexity, contrast and smoothness, pick a color, gradient or image fill, then copy SVG, CSS or React, or save a PNG.

CSS

SVG Wave Generator

Make an SVG wave divider for the top or bottom of a section: set points, amplitude, curve bend, size and color, then copy the SVG or download SVG or PNG.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

Dev

Base64 Converter

Encode text to Base64 or decode Base64 to text. UTF-8, standard and URL-safe alphabets, optional padding on decode, up to 250,000 characters.