๐ผ๏ธ SVG to Base64 Converter
SVG code
Preview
Data URI
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSIyMCIgZmlsbD0iIzFhM2E1YyIvPjwvc3ZnPg==
img tag
<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.
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.