How do I set background-image from SVG Base64?

Paste SVG and click Copy background-image. You get one declaration: background-image: url("data:image/svg+xml;base64,…");

Why not the background shorthand?

background-image leaves size, position, and color free. Use SVG to Base64 CSS Background when you want center / contain in one line.

Yes — CSS repeats background images. Add background-repeat: no-repeat and a size if you want a single icon.

SVG to Base64 CSS wraps the same URI in a .icon rule.

FAQ

Quick answers

How do I set background-image from SVG Base64?: Paste SVG and click Copy background-image. You get one declaration: background-image: url("data:image/svg+xml;base64,…");
Why not the background shorthand?: background-image leaves size, position, and color free. Use SVG to Base64 CSS Background when you want center / contain in one line.
Will it tile by default?: Yes — CSS repeats background images. Add background-repeat: no-repeat and a size if you want a single icon.
Need a full class block?: SVG to Base64 CSS wraps the same URI in a .icon rule.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B