How do I convert SVG to Base64 online?

Paste or upload SVG, then click Copy Base64 data URI. The Data URI tab already shows data:image/svg+xml;base64,… — nothing is uploaded.

What does the sample SVG demonstrate?

A compact star mark with viewBox only (no root width or height) so the encoded string stays short and scales in CSS or HTML.

Almost. This hub copies the full data URI. Open SVG to Base64 String if you only need the raw encoded characters.

Yes. Use SVG to Base64 CSS or SVG to Base64 HTML Img for ready-to-paste snippets around the same encoding.

FAQ

Quick answers

How do I convert SVG to Base64 online?: Paste or upload SVG, then click Copy Base64 data URI. The Data URI tab already shows data:image/svg+xml;base64,… — nothing is uploaded.
What does the sample SVG demonstrate?: A compact star mark with viewBox only (no root width or height) so the encoded string stays short and scales in CSS or HTML.
Is SVG to Base64 the same as a data URI?: Almost. This hub copies the full data URI. Open SVG to Base64 String if you only need the raw encoded characters.
Can I use the result in CSS and HTML?: Yes. Use SVG to Base64 CSS or SVG to Base64 HTML Img for ready-to-paste snippets around the same encoding.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B