Paste it, ship it inline.
Drop an SVG file or paste raw markup. Get a base64 data URI ready for CSS, HTML, or JSX.
SVG encoding happens in the browser. Nothing is uploaded.
What it does
About the SVG to Base64 Converter.
An SVG to Base64 converter encodes SVG markup into a data URI you can use as a CSS background, an img src, or an inline asset in HTML or JSX.
Small icons and simple illustrations ship faster as data URIs when you want zero extra network request. Keep an eye on size: large illustrations belong in files, not in CSS.
How to use
Three steps.
Set
Paste raw SVG markup or drop an .svg file from your machine.
Read
Review the encoded data URI output.
Copy
Copy the URI into CSS url(), an img src, or a JSX attribute.
When to use it
Where it helps.
Use it for tiny UI icons, empty-state marks, and background flourishes. Prefer files or an SVG sprite when the same asset is reused many times or is heavy.
FAQ
FAQ.
What is an SVG data URI?
It is the SVG file encoded (often as base64) into a string that starts with data:image/svg+xml. Browsers can paint it without a separate image request.
Is my SVG uploaded to a server?
No. Encoding runs in your browser with the File API or the pasted markup. Nothing is sent anywhere.
How do I use the output in CSS?
Paste the data URI inside url("...") on background-image, or use it as the src of an img. In JSX, the same string works as a src or CSS variable.
Should I minify the SVG first?
Yes when you can. Fewer path points and no editor metadata means a shorter URI and less CSS weight.
Can I reverse base64 back to SVG?
This page is built for SVG to data URI. To reverse, decode the base64 payload after the comma in the data URI with any local decoder.