How do I put SVG in CSS as Base64?

Paste the SVG and click Copy Base64 CSS. The snippet is a class with background-image: url("data:image/svg+xml;base64,…").

Should I use quotes around the data URI?

Yes in this snippet. Double quotes wrap the url() value so the Base64 string stays one token.

Property only, not a class?

Open SVG to Base64 CSS Background Image for a single background-image declaration.

Is url-encoded CSS smaller?

Sometimes. This page stays on Base64 because that is the query intent. The Data URI tab still has a CSS (urlencoded) chip if you want to compare size.

SVG to Base64 CSS Online — Free Tool

FAQ

Quick answers

How do I put SVG in CSS as Base64?: Paste the SVG and click Copy Base64 CSS. The snippet is a class with background-image: url("data:image/svg+xml;base64,…").
Should I use quotes around the data URI?: Yes in this snippet. Double quotes wrap the url() value so the Base64 string stays one token.
Property only, not a class?: Open SVG to Base64 CSS Background Image for a single background-image declaration.
Is url-encoded CSS smaller?: Sometimes. This page stays on Base64 because that is the query intent. The Data URI tab still has a CSS (urlencoded) chip if you want to compare size.

SVG to Base64 → CSS background-image → CSS background → CSS data URI →

Privacy Terms

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

SVG to Base64 CSS

Live preview