What is a CSS data URI for SVG?

The string url("data:image/svg+xml;base64,…") that CSS accepts anywhere a url() image is allowed.

Where can I paste it besides background-image?

mask-image, list-style-image, border-image, and generated-content content: url() all accept it.

Base64 is what this intent asks for. It avoids quote-escaping SVG markup inside CSS.

Use SVG to Base64 CSS Background Image for a full declaration.

FAQ

Quick answers

What is a CSS data URI for SVG?: The string url("data:image/svg+xml;base64,…") that CSS accepts anywhere a url() image is allowed.
Where can I paste it besides background-image?: mask-image, list-style-image, border-image, and generated-content content: url() all accept it.
Why Base64 instead of UTF-8 in the URI?: Base64 is what this intent asks for. It avoids quote-escaping SVG markup inside CSS.
Want the property name included?: Use SVG to Base64 CSS Background Image for a full declaration.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B