SVG to Data URI & CSS Background Converter

About the SVG to Data URI & CSS Background Converter

Turn SVG code into a data URI you can put straight into CSS or HTML — background-image: url("data:image/svg+xml,…") — so a small icon, arrow, divider or pattern needs no separate file and no extra request. The converter makes the shortest form that still works: instead of Base64, which makes everything a third larger, it percent-encodes only the characters that have to be encoded (%, #, <, > and the few that CSS, HTML, Sass, Less and JSX read specially), switches the SVG’s attribute quotes so they never clash with the CSS string, and writes every colour in its shortest spelling — #ff0000 becomes red, because # costs three characters once it is encoded as %23.

It also fixes what stops an SVG from showing in a data URI: a missing xmlns, a missing viewBox, HTML entities such as  , scripts, editor data and comments. You get ready snippets for CSS background-image, a mask-image icon that takes the text colour, list-style-image, a custom property, an **HTML <img>, Sass, Less and JSX**, with a preview at four sizes and a size comparison. Everything runs in your browser; your SVG is never uploaded. Without a pass the free preview shows the sizes, a watermarked preview and the first lines of each snippet.

Common uses

• Icons, arrows, checkmarks and bullets in a stylesheet, without extra files or requests.
• Custom select arrows, checkbox ticks and list bullets in CSS-only components.
• Colourable icons through mask-image and currentColor, for buttons, links and dark mode.
• Sass and Less variables, CSS custom properties and React style objects that carry an icon.
• Decoding a data URI found in someone’s CSS to read or edit the SVG inside it.

Why URL-encoding beats Base64 for SVG

Base64 turns every 3 bytes into 4 characters, so it adds a third, and it hides the repeated markup that gzip compresses well. SVG is already text, so most of it can stay as it is. A data URI is percent-decoded before use (RFC 2397; the WHATWG data: URL processor), so only these must change:

• %, written %25, because it starts an escape;
• #, written %23, because the browser reads everything after it as a fragment and drops it — an unencoded #fff cuts the image off;
• the quote mark around the CSS string, so the SVG’s own attributes switch to the other quote;
• line breaks, which URL parsers delete (they become spaces), and every character outside ASCII (encoded as UTF-8).

This converter also encodes < and > (older browsers needed it) and { } [ ] | ^ \ , the back-tick and &, so the same string is safe in Sass and Less (no interpolation), in JSX and HTML attributes (no entities) and in JavaScript template literals. Spaces, =, :, /, commas and parentheses stay readable.

Fixes for an SVG that shows nothing

• The namespace. An SVG pasted into an HTML page draws without xmlns="http://www.w3.org/2000/svg", but as an image it shows nothing. It is added if missing.
• The viewBox. Without one, CSS cannot scale the drawing: background-size: contain or a new width only crops or pads it. When width and height are plain numbers, viewBox="0 0 width height" is added.
• Entities. XML knows only &, <, >, " and '; HTML ones such as   are written as numeric references ( ) and a lone & as &.
• Scripts and links. Scripts never run in an SVG used as an image, and it never loads other files, so <script>, event handlers and javascript: links are removed, and linked images, style sheets and web fonts are reported.
• Clean-up. Comments (except licence notices), <metadata>, editor data from Inkscape, Illustrator or Sketch, unused namespaces and white space between elements are removed; text keeps its spaces.

currentColor, masks and colours

An SVG in a CSS background is a separate image: currentColor inside it means its own color (black unless set), not the colour of your text. To colour an icon from CSS, use the mask-image snippet: the SVG becomes the shape of a box filled with background-color: currentColor, so it follows the text colour, hover states and dark mode. The snippet includes the -webkit- prefixed form for older browsers. To build one colour into the image instead, choose One colour: fills and strokes change, in attributes, style attributes and <style> sheets; none, gradients and patterns are kept.

When not to inline

A data URI is not cached on its own: it travels with every copy of the stylesheet or page that contains it. Inline small images that are used where they are defined; for larger drawings (more than a few kilobytes) or icons used across many pages, a separate file or a sprite is usually faster. If your site sends a Content-Security-Policy, img-src must allow data: for these images and backgrounds to load.

Limitations

• Path data and numbers are not rewritten; tick Optimise with SVGO first for that (it also runs in your browser).
• Recolouring changes fill and stroke colours; gradient stops, filters and embedded bitmaps keep their own colours.
• Text in the SVG can use only the fonts installed on the visitor’s device; for an exact look, convert text to paths in your editor before converting.
• Very large SVGs (hundreds of kilobytes) are slow to preview and make poor data URIs.
• In the free preview, each snippet shows only its first half of lines — the data URI itself is one line, so it stays hidden — and copying and downloads stay locked until the result is unlocked.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.