What This Tool Does
This tool converts SVG markup into a data URI, a self-contained string that embeds the SVG directly inside CSS, HTML, or Markdown without a separate file. Paste an svg element, and it's encoded instantly, with a live preview alongside ready-to-use HTML, CSS, and Markdown snippets.
How to Convert SVG to a Data URI
Paste a complete SVG element into the input, starting with <svg and containing a closing tag. The data URI, dimensions, and file size update immediately. Choose an encoding mode, then use the Preview tab to check the rendered result or the other tabs to copy the URI or a ready-made snippet.
Minimal, Full, and Base64 Encoding Modes
Minimal encoding replaces only the handful of characters that break a URL (< > # % " { and }), producing the smallest, most readable output, and is recommended for modern browsers. Full encoding runs the SVG through encodeURIComponent, escaping every special character including spaces, for maximum compatibility at the cost of a longer string. Base64 encodes the whole SVG as base64 text, the most universally supported option and also the largest.
Preview Tools: Rotate, Zoom, Download, and Print
The Preview tab includes rotate left and right, zoom in and out, a reset button, and dedicated download, print, and fullscreen controls, letting you check how the encoded SVG actually renders before using it.
Common Uses for an SVG Data URI
Embedding a small icon or logo directly in a CSS background-image without a separate file request, inlining an SVG in an HTML email where external images are often blocked, and pasting a self-contained icon into a Markdown document are all common reasons to convert SVG to a data URI. As an svg data uri generator, it doubles as a way to convert svg to base64 or use it as an svg to base64 converter, an inline svg data uri and svg base64 encoder, an svg url encode online tool that turns an svg to css background image, and a place to embed svg as data uri whenever you need an svg data uri online.