SVG to CSS Converter

About SVG to CSS Converter

An icon in a stylesheet costs no request, which is the whole argument for a data URI: the file is already there when the CSS arrives. Both encodings are produced here because which one is smaller genuinely depends on the file — Base64 inflates every file by a third, while percent-encoding only pays for the characters that need escaping, and an SVG is mostly letters and spaces.

Percent-encoding is usually the winner, and it is also readable. Only the characters that would end the url() or the attribute around it are escaped — angle brackets, quotes, parentheses, the hash. Double quotes inside the markup are turned into single quotes first, which is free and saves several bytes per attribute. What comes out still looks like SVG, so it can be edited in place in a stylesheet.

mask-image is the option worth knowing about. A background paints the file with the colours baked into it; a mask keeps only the shape and takes its colour from CSS, so one icon file serves every state — default, hover, disabled, inverted — with background-color: currentColor. For a single-colour icon that is almost always the right choice.

Where it helps

• Both encodings are measured, so the smaller one is a fact rather than a guess.
• Percent-encoding escapes only what has to be escaped, which keeps the markup readable inside the stylesheet.
• Offers the mask form, which is how one icon file serves every colour an interface needs.
• Adds the XML namespace when it is missing, without which a data URI silently fails to render.
• Warns when the result is large enough that a separate file would serve the page better.
• Runs entirely in your browser — the SVG is never uploaded.

Limits

• A data URI cannot be cached on its own. It is re-downloaded with every copy of the stylesheet that carries it, which is the wrong trade for anything but small, ubiquitous icons.
• Over roughly 8KB the cost outweighs the saved request, and a stylesheet bloated with images delays the first paint that depends on it.
• Masks need a single-colour shape. A multi-coloured illustration loses all of its colour, keeping only its alpha.
• Minifying is textual, not semantic: it removes comments and whitespace but will not simplify paths or drop unused attributes the way a real SVG optimiser does.
• Scripts and inline event handlers inside the SVG are left as they are. They cannot run from a background or a mask, and they can run if the same file is served directly.

Frequently asked questions

Percent-encoding or Base64?

Percent-encoding, unless something in your build breaks it. Base64 adds about 33% to every file regardless of its content, while percent-encoding only pays for the characters it escapes — on a typical icon that is a 20–30% difference in the wrong direction for Base64.

Why does my data URI show nothing?

Usually a missing xmlns attribute. Inline in HTML a browser forgives its absence; in a data URI the SVG is parsed as a standalone document and the namespace is mandatory. This tool adds it when it is not there. The other usual cause is an unescaped # in a fill colour, which starts a fragment.

When should I use a separate .svg file instead?

When the image is more than a few kilobytes, when it is used on one page rather than everywhere, or when you want it cached independently of the CSS. Data URIs are for small icons that appear throughout an interface.

How do I make the icon follow my text colour?

Use the mask form and set background-color: currentColor. The mask keeps the shape and the colour comes from the element, so the icon inherits hover, focus and disabled states with no extra files.

Related tools

• SVG Path Viewer — Draw path data and read back what it contains
• Image Base64 Converter — Turn an image into a data URI for CSS or HTML, and read one back
• SVG Converter — Draw an SVG at any size, or wrap a bitmap in one
• Favicon Generator — Build favicon PNGs and a multi-size .ico
• HTML Formatter — Indent and tidy HTML markup
• CSS Formatter — Format stylesheets with consistent indentation

More Web Development tools

• HTML Formatter — Indent and tidy HTML markup
• CSS Formatter — Format stylesheets with consistent indentation
• JavaScript Formatter — Re-indent JavaScript and TypeScript source
• SCSS/SASS Formatter — Format SCSS syntax and nested rules
• TypeScript Formatter — Format TypeScript source code
• SQL Formatter — Format SQL statements with dialect selection
• SQL Minifier — Collapse formatted SQL into compact text
• CSS Unit Converter — px, rem, em, percentages and viewport units, with a preview
• Query String Parser and Builder — Convert query strings into editable key-value data
• CSP Generator — Build a Content-Security-Policy, or check one, and write it for your server or framework
• CORS Generator — Write CORS configuration for nginx, Express, Go, Django, ASP.NET, Spring and more, and test an origin against it
• cURL Builder — Build an HTTP request and get it as curl, JavaScript, TypeScript, Go, Python, PHP, C#, Java and more
• Minifier — Shrink CSS, HTML or JavaScript
• Flexbox Playground — Try every flex property and read the CSS back
• CSS Grid Playground — Build a grid template and see the tracks it makes
• Responsive Viewport Tester — Render your markup at phone, tablet and desktop widths
• SVG Path Viewer — Draw path data and read back what it contains
• OAuth 2.0 / OIDC Helper — PKCE verifiers and challenges, state, nonce, and checking what came back
• Regex Tester — Test patterns, inspect groups and preview replacements
• User-Agent Parser — Identify the browser, engine, operating system and device behind a User-Agent string
• HTTP Status Codes — Look up what a status code means, when to send it, and whether it is cached or safe to retry
• HTML to JSX — Convert HTML and SVG markup into JSX for React, with styles, attributes and whitespace handled
• Semver Checker — Test versions against npm ranges, sort them by precedence, and see what each bump produces
• Cookie Parser and Builder — Read Set-Cookie and Cookie headers, check them against browser rules, and write one for your framework