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.
Frequently Asked Questions (FAQ)
What is an SVG data URI?
A data URI lets you embed a small file directly inside your code instead of loading a separate file. An SVG data URI starts with data:image/svg+xml, followed by the SVG code, URL-encoded or base64-encoded.
Which variant should I use: URL-encoded or Base64?
URL-encoded is shorter and easier to read or edit, and is the common choice for SVG backgrounds in CSS. Base64 is needed when a server or tool requires it; it is about 33 percent larger.
Can I preview the SVG before copying?
Yes. The tool renders a live preview of your SVG from the generated data URI, so you can check that the input code is valid and looks right.
Is my SVG uploaded to a server?
No. The conversion runs entirely in your browser; your SVG code never leaves your device.
What input does the tool accept?
You can paste raw SVG code into the text box, load the built-in sample, or upload a .svg file. The input must contain an svg tag.