SVG to CSS Converter
Note: An SVG referenced from CSS renders in a restricted mode — no scripting, and your stylesheet cannot reach inside it. Anything that needs to animate or respond to hover on its internal parts has to be inlined into the HTML instead.
The conversion is also the moment to decide between a background and a mask, and it is a more consequential choice than it looks. A background-image paints the SVG exactly as authored, colours and all, so changing it for a hover state or a dark theme means generating a second copy with different fill values baked in. A mask uses the SVG's alpha channel as a stencil and paints background-color through it, which means the icon takes currentColor and follows your text colour, your theme and your hover state with no second copy at all. For a single-colour icon the mask is almost always the better answer, and it is the one people know about least.
Percent-encoding rather than Base64 matters here too. Base64 inflates the string by a third and makes it unreadable; escaping only the handful of characters that actually break CSS keeps it around a quarter shorter and still diffable, so a reviewer can see what changed.
The optimisation pass removes the things design tools leave behind — editor metadata, comments, empty groups, excessive coordinate precision — which is usually where half the size of an exported icon is sitting.
Frequently Asked Questions
Should I use background-image or mask?
Mask for a single-colour icon, because it takes currentColor and follows your text colour, hover state and theme with no second copy. background-image when the SVG is multi-coloured or an illustration whose colours are part of it.
Why does my CSS break when I paste the SVG in?
Almost always unescaped double quotes on the SVG's own attributes — inside url("…") the first one ends the string. Hashes in colour values are the second most common cause, since a # starts a fragment identifier. Both are handled in the output here.
Why not Base64?
Because SVG is text and does not need it. Base64 makes the string about a third longer and completely unreadable, while percent-encoding only the breaking characters keeps it shorter and still legible in a diff. Base64 is for binary formats with no safe textual form.
Can I animate an SVG used this way?
No. An SVG referenced from CSS — as a background or a mask — renders in a restricted mode with no scripting and no access from your stylesheet. Anything that needs to animate or respond to a hover on its internal parts has to be inlined into the HTML.
