SVG to Data URI Converter: Embed SVGs Inline Without HTTP Requests

SVG files are vectors: infinitely scalable, small in file size, and ideal for icons, logos, and UI graphics. But serving them as separate files means an HTTP request for every image — and for small icons used across many components, that overhead adds up. The alternative is embedding the SVG directly in your CSS or HTML as a data URI, which eliminates the network round trip entirely.

Toolzy's SVG to Data URI Converter handles the encoding for you. Paste or upload an SVG, and get a ready-to-use data URI string in either URL-encoded or Base64 format — with a preview so you can confirm it looks right before you copy it.

What Is a Data URI?

A data URI (also called a data URL) is a URI scheme that embeds file content directly into a URL string rather than referencing an external resource. The format is:

data:[<mediatype>][;base64],<data>

For an SVG, this looks like:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+...

Or in the URL-encoded (non-base64) variant:

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E...

Both forms can be used anywhere you'd use a regular URL: as the src of an <img> tag, as a background-image value in CSS, as the href of an <a> tag, or in email HTML.

Why Use a Data URI for SVG?

Eliminating HTTP Requests

Each external image file in a webpage requires a separate HTTP request. For a UI with 20 icons, that's 20 additional network round trips — adding latency, especially on mobile connections or high-latency networks. Inlining SVGs as data URIs removes these requests entirely: the image data is bundled with the CSS or HTML that references it.

This was more significant in the HTTP/1.1 era (where browsers limited parallel connections per domain) but remains relevant for:

• CSS background images that must be available before first paint
• Email templates where external image loading is blocked by default
• Offline web applications and PWAs where asset caching is complex
• Component libraries distributed as a single CSS file with no separate asset folder

Simplified Asset Management

When an SVG is encoded into a data URI and embedded in a CSS file or a JavaScript component, there's no separate asset file to track, deploy, or version. The image travels with the code that uses it. This is particularly useful for:

• Design system packages: A published npm package with a single CSS file can include all its icons as data URIs — no need for consumers to configure asset paths.
• Single-file components: Vue's SFCs and similar formats allow embedding all component resources in one file. Data URI icons fit this model naturally.
• Standalone HTML files: For email templates, documentation pages, or shareable demos, a file with no external dependencies is far more portable.

CSS Background Images

Inline SVG via <img> or <svg> tags is flexible, but sometimes you need an SVG as a CSS background. This is common for decorative patterns, custom checkboxes, radio buttons, select arrows, and pseudo-element icons. You can't reference inline SVG markup from CSS — you need either a file URL or a data URI.

.checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 2.5l-8 8-3-3'/%3E%3C/svg%3E");
}

URL-Encoded vs Base64: Which Should You Use?

The converter offers two encoding options. Here's the difference:

URL-Encoded (Optimised)

The SVG XML is kept as text, with special characters (<, >, ", #, etc.) percent-encoded. The result is readable and can be inspected in DevTools.

Advantages:

• Smaller output size — SVG is text and encodes efficiently as URL-encoded text
• The resulting data URI is shorter than the Base64 equivalent (typically 20–30% smaller)
• The SVG markup is still readable in the encoded string (with some effort)
• Gzip/Brotli compression works better on text than on Base64

Disadvantages:

• Requires careful escaping — improperly encoded SVGs can break CSS parsing
• Single quotes must be used inside the SVG markup when the data URI is used in a CSS url() value (which uses double quotes)

Base64

The SVG is converted to a binary representation and then encoded as a Base64 ASCII string.

Advantages:

• Universally safe — no parsing issues with quotes or special characters
• Required for some environments that don't support URL-encoded data URIs (older email clients, some PDF renderers)
• Easier to generate programmatically

Disadvantages:

• Increases file size by approximately 33% compared to the original SVG
• The encoded string is opaque — you can't read the SVG markup from it
• Less compression-friendly than plain text

Recommendation: Use URL-encoded for CSS backgrounds and modern HTML. Use Base64 for email templates, older browser compatibility, or when you encounter parsing issues with the URL-encoded form.

How to Use the Converter

1. Open toolzy.in/tools/svg-to-datauri
2. Paste your SVG code into the input panel, or upload an .svg file
3. Choose encoding: URL-encoded (recommended for CSS) or Base64
4. See the live preview — confirms the SVG renders correctly after encoding
5. Copy the data URI for use in url(), src="", or wherever you need it

The tool also shows you the output formatted for immediate use in different contexts:

• CSS background-image: background-image: url("...")
• HTML img src: <img src="..." alt="...">
• Raw data URI string for use in JavaScript or other contexts

Practical Examples

Custom Checkbox with SVG Checkmark

input[type="checkbox"]:checked {
  appearance: none;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13.5 2.5l-8 8-3-3-1 1 4 4 9-9z'/%3E%3C/svg%3E");
  background-color: #3b82f6;
  border-radius: 2px;
}

SVG Logo in Email Template

Email clients like Gmail block external image requests by default. Embedding your logo as a data URI ensures it always displays:

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..." alt="Company Logo" width="120">

Inline Icon in JavaScript Component

When building a component library, icons as data URIs can be exported as constants:

export const ICON_CHEVRON_DOWN = `url("data:image/svg+xml,%3Csvg...%3E")`;

.select-trigger {
  background-image: var(--icon-chevron-down);
}

Limitations and Considerations

File size threshold: Data URIs increase the size of the embedding CSS or HTML file. For small icons (under 2KB), this is a net win — you eliminate an HTTP request and save on the round-trip time. For larger SVGs (complex illustrations, detailed maps), the Base64 overhead may exceed the cost of the network request, especially if the SVG can be cached separately.

No caching: Unlike external files, data URIs can't be cached independently by the browser. If the same SVG is used in multiple places with a data URI, its bytes are repeated in every CSS rule that references it. For widely reused icons, an icon sprite or SVG symbol system is more efficient.

SVG must be well-formed: The converter validates that the SVG is parseable before encoding. Malformed SVG (unclosed tags, invalid attribute values) will produce a broken data URI that displays nothing.

Dark mode / theming: Because the SVG is encoded as a static string, its colours are fixed at encode time. If you need an icon to change colour based on dark mode, use inline <svg> with currentColor instead of a data URI.

Frequently Asked Questions

Can I use data URIs in Tailwind CSS? Yes, via the bg-[url(...)] arbitrary value syntax in Tailwind v3:

<div class="bg-[url('data:image/svg+xml,...')]"></div>

Or by defining it as a utility in your CSS file using @layer.

Does the converter handle multi-colour SVGs? Yes — any valid SVG, regardless of complexity, can be encoded. Gradients, multiple paths, masks, and filters are all preserved.

What's the maximum SVG size I should embed? As a rule of thumb, keep data URI SVGs under 5KB original size. Beyond that, the network overhead of a separate file with proper caching is typically lower than the inline cost.

Can I use this for SVG fonts? SVG fonts (format('svg') in @font-face) can technically be encoded as data URIs, but this is an extremely niche use case and the font file size makes it impractical in most scenarios.

---

Ready to eliminate those extra HTTP requests? Open the SVG to Data URI Converter, paste your SVG, and have an embeddable data URI in your clipboard instantly.