Why use a data URI instead of an external SVG file?

Inlining a small SVG as a data URI in your CSS removes an extra HTTP request, so the icon or background loads with the stylesheet and cannot flash in late. It is ideal for small icons, patterns and decorative shapes.

Should I use URL-encoded or base64?

Prefer URL-encoding for SVG. It produces a smaller string than base64, stays readable in your stylesheet, and gzips better. The base64 option is offered as a fallback for older tooling that mishandles unencoded characters.

Is my SVG uploaded anywhere?

No. The conversion happens entirely in your browser. Your SVG markup is never sent to a server, stored or logged, so it is safe for unreleased brand assets and internal icons.

My preview is blank — what went wrong?

The tool needs a complete … element. Check the opening and closing tags are present and that the SVG has a width, height or viewBox. Also make sure any colours are set, since a fill of none with no stroke renders invisibly.

Can I use this for CSS masks too?

Yes. The same data URI works with the CSS mask-image and -webkit-mask-image properties, which is a common way to recolour a single-path icon using background-color.

What is the SVG to CSS Background Converter?

Free SVG to CSS background converter. Paste inline SVG and get a ready-to-paste background-image data URI — an optimised URL-encoded version plus a base64 fallback — with a live preview. Runs in your browser, your SVG is never uploaded. It runs free in your browser on Gera Tools, with nothing uploaded.

SVG to CSS Background Converter

Name: SVG to CSS Background Converter
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

Inline an SVG as a CSS background

The SVG to CSS Background Converter turns inline SVG markup into a ready-to-paste background-image value. Inlining a small SVG as a data URI removes an extra network request, so an icon or pattern arrives with your stylesheet instead of loading late — perfect for icons, patterns and decorative shapes.

Paste your <svg>…</svg> markup and you immediately get a live preview, an optimised URL-encoded value, and a base64 fallback. Copy whichever you need and drop it straight into your CSS.

URL-encoded is the better default

For SVG, prefer the URL-encoded output:

It is smaller than base64, which inflates data by roughly a third.
It stays human-readable in your stylesheet, so you can still see the shape.
It compresses better over the wire.

The tool escapes only the characters that would break the url() token and converts double quotes to single quotes so the whole value wraps cleanly in double quotes. The base64 version is there for older build tooling that mishandles unencoded data URIs.

Tips

Keep it for small graphics — large SVGs are better left as separate files.
The same data URI also works with mask-image to recolour a single-path icon via background-color.
If the preview is blank, confirm the SVG has a viewBox or explicit size and a visible fill or stroke.

Everything runs client-side; your SVG markup is never uploaded, so it is safe for unreleased brand assets.