What is an SVG Base64 data URI?

It is the SVG file encoded as Base64 after data:image/svg+xml;base64, so a browser can treat the string as an image without a separate file.

How do I convert SVG to a Base64 data URI?

Paste the sample or your markup, then click Copy Base64 data URI. The Data URI tab stays on Base64 encoding.

viewBox alone lets the image scale when you set CSS width/height on the host element. Fixed root size would fight that.

Use SVG to Base64 HTML Img to copy a complete snippet.

FAQ

Quick answers

What is an SVG Base64 data URI?: It is the SVG file encoded as Base64 after data:image/svg+xml;base64, so a browser can treat the string as an image without a separate file.
How do I convert SVG to a Base64 data URI?: Paste the sample or your markup, then click Copy Base64 data URI. The Data URI tab stays on Base64 encoding.
Why is there no width or height on the sample?: viewBox alone lets the image scale when you set CSS width/height on the host element. Fixed root size would fight that.
Want an HTML img tag around it?: Use SVG to Base64 HTML Img to copy a complete <img src="data:…"> snippet.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B