SVG to CSS data URI converter

Turn an SVG into a CSS background data URI, URL-encoded or base64, optimized first with SVGO. Your files never leave your device.

1 · Add SVGs

Drop SVG files Exports from Figma, Illustrator, Inkscape or Sketch. Add as many as you like.

Or paste SVG code

2 · Options

Decimal precision2

Remove width and heightThe SVG scales to its container. The viewBox is always kept. Keep the titleScreen readers announce it. Untick for purely decorative graphics. Use currentColorFor single-color icons: they take the surrounding text color. Prefix IDs with the file nameStops gradients and clip paths clashing when several SVGs are inlined on one page. Turn style attributes into propertiesShorter output and cleaner React props. Pretty-printReadable, indented markup. Adds bytes.

3 · Optimized

Loading the optimizer…

Add an SVG above to see the result.

Using SVG as a CSS data URI

A data URI puts the whole SVG inside your stylesheet, so a small decorative graphic like an arrow, a divider or a background pattern needs no extra request. The converter optimizes the SVG first, then writes a ready-to-paste background-image rule.

For SVG, URL-encoding is usually 20 to 30 percent smaller than base64, so that’s the default. The Base64 tab is there for tools that only accept base64.

Keep data URIs for small graphics. A large illustration is better as a normal file, which the browser can cache on its own and load only where it’s used.

Questions

Why are the quotes changed?

Double quotes inside the SVG are swapped for single quotes, so the data URI can sit inside url("…") without breaking the CSS.

Are my files uploaded?

No. Everything runs in your browser, inside this page.

More tools

Free tools that run in your browser

Responsive image converter

Turn one image into WebP, AVIF and JPEG at every width, with picture markup ready to paste.

2.4 MB → 142 KB

Convert an image

Font subsetter

Keep only the characters your site uses and ship the font as WOFF2, with @font-face CSS.

207 KB → 35 KB

Subset a font

SVG optimizer

Strip editor clutter from SVGs and export them as inline SVG, React components or CSS.

12 KB → 3.0 KB

Optimize an SVG

Favicon generator

Turn one logo into favicon.ico, an SVG icon, home screen icons and a web manifest.

1 logo → 6 icons

Make favicons