SVG to Data URI Converter | Inline SVG for CSS Backgrounds

Why Use SVG Data URIs in CSS?

Every time a browser renders a webpage, it fires an HTTP request for each external file — stylesheets, scripts, and images. Each request adds latency. SVG Data URIs eliminate this entirely by embedding the SVG directly inside your CSS as a Base64 or URL-encoded string, so there’s no extra network round-trip.

Instead of writing this in your stylesheet:

.icon { background-image: url('/icons/arrow.svg'); }

You write this — no file server needed:

.icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...%3E"); }

URL-Encoded vs. Base64: Which Should You Use?

This tool offers two encoding methods. Here’s when to use each:

URL Encoding (Recommended for SVGs)

URL encoding replaces unsafe characters like <, >, and # with percent-encoded equivalents (e.g., %3C). The result is human-readable, smaller in file size, and still valid inside a CSS url() function. This is the preferred method for SVGs because SVG markup compresses well and stays inspectable in DevTools.

Base64 Encoding

Base64 converts binary data into a string of ASCII characters. While it works for all file types (PNG, JPEG, fonts), it increases file size by ≈33% compared to the original. For SVGs specifically, URL encoding is almost always smaller and faster. Use Base64 only if you run into compatibility issues with a specific build tool or email client.

Understanding SVG Encoding Requirements

Not every SVG can be inlined directly. Before converting, your SVG must follow these rules:

• The xmlns attribute is mandatory. The SVG element must have xmlns="http://www.w3.org/2000/svg" or browsers will refuse to render it as a CSS background.
• Double quotes must be replaced. Since the data URI lives inside a CSS url("") string, any internal double quotes will break the string. This tool handles this automatically — it converts them to single quotes or encodes them.
• Hash (#) characters in colors must be encoded. CSS color values like #ff0000 contain a #, which signals a URL fragment. The encoder replaces it with %23.
• Newlines should be removed. Multi-line SVG source should be minified to a single line for reliable cross-browser inline CSS support.

Performance Benefits: Reducing HTTP Requests

The HTTP/1.1 protocol limits browsers to 6–8 simultaneous connections per domain. Every additional icon file competes for those slots. SVG Data URIs are especially powerful in these scenarios:

1. Icon Systems in Component Libraries

If you’re building a component library (React, Vue, Web Components), embedding icons as CSS Data URIs means components are fully self-contained. There’s no dependency on an external icon pack, CDN, or bundled sprite file. The icon ships with the CSS.

2. CSS-Only Decorators and Pseudo-Elements

Data URIs are the only way to use SVGs inside CSS ::before and ::after pseudo-elements. This is how developers add SVG checkmarks, arrows, or decorative shapes without adding extra HTML elements:

.success-label::before {
  content: url("data:image/svg+xml,%3Csvg...%3E");
}

3. Email Templates

Email clients block external image requests by default (Outlook, Gmail on certain clients). Inlining SVG icons as Data URIs in your CSS ensures the icon always renders, regardless of image-blocking settings.

4. Offline-First and PWA Assets

Progressive Web Apps cached in a service worker benefit from having critical UI icons inlined in CSS — the icon loads even when the device is offline, because there’s no network request to fail.

Best Practices for Data URIs

• SVGs only. While you can Base64-encode raster images (PNG, JPEG) as Data URIs, the size increase rarely justifies it. Use Data URIs for SVGs and serve rasters via CDN.
• Keep SVGs small. Data URIs add to your CSS file size. Run your SVG through an SVG optimizer (like SVGO) before converting — remove unnecessary metadata, comments, and editor-specific attributes.
• Cache them with your CSS. Since the Data URI is embedded in your stylesheet, it inherits your CSS cache headers. Set a long Cache-Control: max-age and use content hashing in your filenames.
• Avoid large SVGs. If an SVG is over 2–3KB, it’s better served as a standalone external file with proper caching than bloating your CSS.

Explore More Free CSS Workflow Tools

Optimize your entire CSS workflow with these related tools:

• CSS Glassmorphism Generator
• CSS Mesh Gradient Generator
• CSS Clip-Path Polygon Maker
• Smooth Box Shadow Generator
• CSS Fluid Typography Calculator

Frequently Asked Questions

Is a Data URI SVG the same as an inline SVG?

No. An inline SVG is SVG markup embedded directly inside an HTML file (<svg>...</svg>). A Data URI SVG is an encoded string embedded inside a CSS url() value. Both avoid external HTTP requests, but inline SVG can be styled and scripted with JavaScript, while Data URI SVGs cannot — they’re treated as an opaque image by the browser.

Can I change the color of a Data URI SVG with CSS?

Not directly. Unlike inline SVGs, you cannot target elements inside a Data URI SVG with CSS selectors or the fill property from your stylesheet. The color must be hardcoded in the SVG source before encoding. If you need dynamically colored icons, use inline SVG or an icon font instead.

Why does my Data URI look broken in Internet Explorer?

IE11 does not support URL-encoded SVG Data URIs at all. It requires SVGs to be Base64-encoded. If you need IE11 support, switch to the Base64 output option. Modern browsers (Chrome, Firefox, Safari, Edge) fully support both formats.

Does this tool send my SVG to a server?

No. All encoding happens entirely inside your browser using JavaScript. Your SVG code never leaves your machine — there are no server uploads, no logging, and no third-party requests. This makes it safe to use with proprietary or internal icon assets.

What is the maximum SVG size I can encode?

There is no hard limit enforced by this tool. However, browsers impose Data URI size limits — most modern browsers support up to 2MB. IE11 caps at 32KB. Practically speaking, any SVG over 5KB should be served as an external file rather than embedded as a Data URI.