RunLocalTools

SVG to CSS Converter — Background, Mask & Inline SVG Generator

Convert an SVG into ready-to-paste CSS: a background-image data URI, a fully recolorable mask-image icon, inline HTML markup, or a Tailwind arbitrary-value class. Runs entirely in your browser — nothing is uploaded.

What it does

Drop in an SVG file (or paste raw SVG markup) and this tool turns it into whichever CSS or HTML format you actually need: a background-image data URI, a recolorable mask-image icon, clean inline SVG markup, a content: url() snippet, an <img> tag, or a Tailwind bg-[url(...)] arbitrary-value class. You can convert several icons in one batch and export them all as a single .css file or a JSON icon map.

How it works

Every SVG is sanitized the moment it’s added — script tags, on* event-handler attributes, and javascript: links are stripped before the file is ever rendered or encoded, since a browser will happily execute a malicious SVG the same as any other. From there, the tool builds two different data-URI encodings and lets you compare their size: a UTF‑8‑safe base64 encoding, and a URL-encoded form based on the well-known technique of escaping only the characters a data URI actually needs escaped (<, >, #, and so on) rather than percent-encoding the whole string — which is usually noticeably smaller and still fully valid CSS.

The mask-image output deserves a specific mention: mask-image only uses the shape (the alpha channel) of the SVG — it completely ignores the original fill and stroke colors. That means any icon, however it was colored originally, becomes instantly recolorable through CSS background-color or currentColor with zero editing. The “replace with currentColor” option in the Inline SVG section is a different, complementary technique: it only matters if you’re pasting the raw <svg> markup directly into your HTML, where fill="currentColor" lets the icon inherit the surrounding text color the normal CSS-inheritance way — it has no effect on the background-image/mask-image/img outputs, which load the SVG as a separate resource and can’t inherit page colors that way regardless.

An optional minify pass strips comments, XML declarations, and common design-tool cruft (Illustrator/Inkscape metadata and namespaces) before encoding, and the size-comparison table shows exactly what each option costs in bytes so you’re never guessing.

How to use it

  1. Drop one or more .svg files onto the tool, or paste SVG markup directly.
  2. Expand a card to see the live preview, detected colors, and intrinsic size.
  3. Pick a class name and, if needed, a width/height override.
  4. Choose the output format that matches how you’ll use the icon — background-image for a simple decorative icon, mask-image if you want it recolorable via CSS with no extra work, or Inline SVG if you’re pasting it straight into your HTML.
  5. Copy the snippet, or use “Download all as one .css” once you’ve built up a batch.

If your source image is a PNG or JPG rather than an SVG, convert it to a vector first with the Image → SVG Converter — this tool picks up from there. And once you’ve got a clean, small icon at the right size, the Favicon generator can turn it into a full favicon set.

Supported formats

Input: .svg files or pasted SVG markup. Output: CSS background-image, CSS mask-image (with -webkit- fallback for Safari), content: url(), <img> tag, inline <svg> markup, and a Tailwind bg-[url('...')] arbitrary-value class.

Privacy

Everything happens in your browser. Files are read locally, sanitized locally, and encoded locally — nothing is ever sent to a server. Your current batch is saved in this browser (via IndexedDB) so a refresh doesn’t lose your work; use “Clear all” to remove it.

FAQ

Why does my icon look fine in the preview but the mask-image version renders solid black? That’s actually mask-image working correctly — it renders the shape filled with whatever background-color is set on the element (which defaults to nothing visible unless you set one). Set background-color: currentColor or a real color on the element using the mask, exactly as the generated snippet does.

Why isn’t background-image recolorable even after I check “replace with currentColor”? The currentColor swap only affects the Inline SVG output. background-image, content: url(), and <img> all load the SVG as a separate external resource, and currentColor inside that resource can’t inherit the host page’s color — that’s a browser limitation, not a bug in this tool. Use mask-image if you need a CSS-recolorable icon without inlining the markup.

Is base64 or URL-encoding smaller? It depends on the SVG — URL-encoding is usually smaller for typical icons since it only escapes the handful of characters that actually need it, but for SVGs with a lot of non-ASCII text content, base64 can occasionally win. The tool shows both sizes side by side so you can just pick.

Will minifying break my SVG? The minifier only strips comments, the XML declaration, editor metadata, and collapses whitespace — it doesn’t touch path data or attribute values, so visual output is unaffected in the vast majority of cases. The one edge case worth knowing about: if your SVG has a <text> element where multiple spaces are meaningful, whitespace collapsing could affect it — check the preview after minifying if your SVG contains text.

Can I use this for icons that need to change color on hover? Yes — mask-image is the right tool for that. Since it ignores the SVG’s own colors entirely, .icon:hover { color: red; } (with background-color: currentColor in the base rule) recolors it with no JavaScript and no separate SVG per color.

Does this work with multi-color SVGs (like a colorful logo)? Yes, but keep in mind mask-image collapses any multi-color SVG to a single flat color (since it only reads alpha). For a multi-color logo you want to keep in full color, use background-image or Inline SVG instead.