SVG CSS Background
What SVG CSS Background actually does
Using an SVG as a CSS background means embedding it in the stylesheet as a data URI, and doing that by hand fails on the characters CSS treats specially. The usual result is a rule that silently paints nothing, which is hard to debug because the stylesheet is valid and the selector matches. This produces the encoded rule directly from the file, with the selector filled in if one is given, and leaves the result editable so it can be adjusted before it is pasted.
How to use it
- Choose an SVG file.
- Optionally give the CSS selector the rule should use.
- Run it and read the generated rule beside the original drawing.
- Edit it if needed, then copy or download the CSS.
Useful for
- Embedding an icon in a stylesheet without an extra request for it.
- Producing a background rule for a custom checkbox, bullet or chevron.
- Getting a correctly encoded data URI without debugging escaping by hand.
Limits worth knowing
- A large SVG makes a large stylesheet, and unlike a separate file it cannot be cached independently.
- CSS cannot restyle a background SVG, so a colour change means regenerating the rule.
- Embedded raster images travel inside the data URI and make it very large; extract them first if that matters.
Questions people ask
Why not just link the file?
A separate file is usually better for anything large or reused. A data URI is worth it for small icons where the extra request costs more than the bytes.
Can I change the colour in CSS?
No. The colour is inside the encoded document. Recolour the SVG and generate the rule again, or inline the SVG instead.
Is the file uploaded to encode it?
No. The encoding happens in this tab.