SVG Data URI Converter Guide: Embed Images in Code

Web pages usually load images as separate files, but sometimes a separate file is more trouble than it is worth. A tiny icon used in one place does not deserve its own download, and an email template cannot rely on external files at all. A data URI solves this by embedding the image data directly in the code, so the image travels with the page instead of beside it.

The SVG Data URI Converter converts SVG markup into a data URI you can paste into HTML or CSS. This guide explains the format, the encoding rules that make it work, and when embedding is the right choice.

What a data URI looks like

A data URI has three parts: the word "data", a media type, and the data itself, separated by a comma. For an SVG, the media type is image/svg+xml, and the URI often begins with data:image/svg+xml, followed by the encoded SVG. In HTML, it is used wherever an image URL would go, such as the src of an img tag. In CSS, it is used inside url() for a background image.

There are two encoding styles. The first is URL encoding, where special characters are replaced with percent codes: a hash becomes %23, a less-than sign becomes %3C, and so on. The second is base64 encoding, where the whole SVG is converted into a longer string of letters, digits, and symbols. URL-encoded SVGs are readable and usually shorter for small graphics, while base64 is more robust for complex SVGs but adds about a third to the size. For simple icons, URL encoding is usually the better choice.

A minimal example shows the shape. An SVG circle in a data URI, URL-encoded, looks like data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='4' fill='%23ff0000'/%3E%3C/svg%3E. The %3C codes are less-than signs, %3E codes are greater-than signs, and %23 is the hash in the colour value. Browsers decode these back into the original SVG and render the red circle.

Why encoding matters

An SVG contains characters that have special meaning in a URL. The hash sign starts a fragment, so a colour written as #ff0000 in a data URI would be cut off at the hash unless it is encoded as %23ff0000. Angle brackets can break HTML parsing if the URI sits inside an attribute. Quotes need care too: if the URI is wrapped in double quotes, the SVG inside should use single quotes, or the quotes must be encoded, or the attribute will end early.

This is the main reason to use a converter rather than hand-building a data URI. The converter applies all the encodings consistently, so you do not have to remember which characters need it. Hand-built URIs usually work for the first test and fail on the second colour or the first quote, and the failure can be silent: the image simply does not appear, with no error message explaining why.

Character encoding is a related detail. SVGs are text, and data URIs usually assume UTF-8. If your SVG contains non-English text or special symbols, make sure it is UTF-8, and declare a charset if the tool you use supports it. A mismatch here shows up as garbled characters in text elements, which is confusing because the shapes still render correctly.

Worked example: converting a red square

Take this small SVG for a red square:

To convert it by hand, replace the characters that need encoding. The opening angle bracket becomes %3C, the closing bracket becomes %3E, and the hash in the fill colour becomes %23. Keeping single quotes for the attributes, the result is:

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23ff0000'/%3E%3C/svg%3E

Check the key conversions: the fill value changed from #ff0000 to %23ff0000, which is the hash encoded as %23 followed by ff0000 unchanged. The angle brackets around svg and rect became %3C and %3E. Spaces, letters, digits, slashes, colons, and equals signs are left as they are, because they are safe in this context. Paste this URI into an img tag's src, and the browser renders a 20 by 20 red square, with no separate file involved.

To verify your own conversion, test it in a browser: if the image appears, the encoding is right; if nothing appears, check the hash first, then the quotes, then the angle brackets, in that order, because those three cause most failures.

When to embed and when not to

Embedding suits small, single-use graphics: icons, tiny decorations, and images in emails or standalone HTML files. It saves a network request, guarantees the image is present, and keeps a document self-contained. For a page with a handful of small icons, embedding can noticeably reduce requests.

Embedding does not suit large or repeated graphics. A large SVG embedded in a page bloats the HTML, cannot be cached separately, and is downloaded again on every page that uses it, whereas a separate file is cached after the first visit. A logo used on every page of a site belongs in a file. A decorative icon used once on one page is a good embedding candidate. As a rough rule, embed graphics under a few kilobytes, and link larger ones as files.

Accessibility still applies to embedded images. An img tag with a data URI needs the same alt text as any other image, describing what the image shows for users who cannot see it. Decorative images should have empty alt text, so screen readers skip them, just as with file-based images.

SVG work involves several tools. The SVG Editor Viewer lets you inspect and edit SVG markup, and the BIMI SVG Validator checks SVGs against the stricter requirements used for brand logos in email. For a guide on converting between image formats, see the Image Format Converter Guide.

Data URIs are a small technique with an outsized usefulness: they turn a file into a string, and a string can go anywhere code goes. Convert carefully, encode the hash and brackets, test in a browser, and reserve embedding for graphics small enough to deserve it.