๐ผ๏ธ SVG to Base64 Converter
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSIyMCIgZmlsbD0iIzFhM2E1YyIvPjwvc3ZnPg==
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSIyMCIgZmlsbD0iIzFhM2E1YyIvPjwvc3ZnPg==" alt="" />
Paste in SVG code and convert it into a Base64-encoded data URI. The result is shown with a live preview, plus code ready to paste directly into an img tag. Handy for embedding SVG icons directly into HTML/CSS without adding extra files.
How to use
- Paste your SVG code into the input field.
- The converted data URI and preview are shown automatically.
- Use "Copy" to copy the data URI or the <img> tag code.
How the calculation works
This tool converts SVG code into a Base64 data URI, which lets you embed an image directly in CSS or HTML without a separate file. Data URI = data:image/svg+xml;base64,(SVG encoded as Base64) The SVG is converted to UTF-8 bytes before Base64 encoding, so non-ASCII text is handled correctly. The result is also shown as a ready-to-use <img> tag with a preview. Base64 represents every 3 bytes with 4 characters, so the data grows to about 1.33 times its original size.
Worked example
Input (136 characters) <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><circle cx="24" cy="24" r="20" fill="#1a3a5c"/></svg> Output (184 Base64 characters) data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvโฆ In CSS background-image: url("data:image/svg+xml;base64,PHN2Zyโฆ");
Things to be aware of
- To use an SVG in <img> or as a background image, the svg tag needs xmlns="http://www.w3.org/2000/svg".
- For SVG you can also skip Base64 and append a percent-encoded string after "data:image/svg+xml,", which is sometimes shorter.
- Data URI images are not cached separately, so large images or ones used on many pages are better as separate files.
FAQ
What is a data URI?
It's a format that embeds file data, like an image, directly as a string inside a URL โ letting you embed an image directly in HTML or CSS without loading an external file.
Does this work with SVGs that contain non-English text?
Yes, it uses UTF-8 encoding, so text elements containing non-Latin characters inside the SVG convert correctly.
Can I use the converted data URI in CSS's background-image?
Yes, use it as background-image: url("..."); with the generated data URI.