SVG to Data URI Converter
Turn any SVG graphic into a data URI you can paste straight into CSS, HTML or code. Paste your SVG code or upload a .svg file, and get both the URL-encoded and the Base64 version, with a live preview and a size comparison. Everything runs 100 percent in your browser — nothing is uploaded.
Convert your SVG
URL-encoded data URI
Base64 data URI
Live preview
Size comparison
| Format | Size | Overhead |
|---|
Copies background-image: url("data:image/svg+xml,..."); using the URL-encoded variant.
How to use
- Paste your SVG code into the text box, click "Load sample SVG" to try an example, or upload a
.svgfile. - Click "Convert to data URI". The tool checks that the input contains an
<svgtag. - Copy the URL-encoded URI (best for CSS) or the Base64 URI with the copy buttons.
- Use "Copy CSS snippet" to get a ready-to-paste
background-imageline. - Check the live preview to make sure the SVG renders correctly.
What is a data URI?
A data URI embeds a small file directly in your code instead of loading it as a separate file. It starts with data:, then the media type (image/svg+xml for SVG), then the file content encoded for use inside a URL. The URL-encoded variant replaces characters like #, <, > and spaces with percent codes, while the Base64 variant uses a compact alphabet and is about one third larger.
When to use a data URI instead of a separate file
- Small icons and decorative graphics — a data URI avoids an extra HTTP request, which helps loading speed for tiny assets.
- CSS backgrounds and masks — embedding the SVG keeps the stylesheet self-contained.
- Prototypes and single-file HTML — everything lives in one document, easy to share.
- Large or reused graphics — use a separate file instead; big data URIs bloat your CSS and cannot be cached separately.