SVG URI Encoder - Online Optimized for CSS Background

An SVG data URI embeds SVG markup directly into a URL string using the data:image/svg+xml scheme. When used in CSS background-image, it eliminates the need for separate SVG files, reducing HTTP requests and improving page load performance. This is especially useful for icons, decorative patterns, and small UI elements. Data URIs are self-contained, cacheable within CSS files, and simplify asset management.

URL encoding is generally preferred for SVG because it's more readable (you can still recognize parts of the SVG), often results in a smaller string for simple SVGs, and is the standard recommended approach. Base64 encoding produces a completely opaque string that's ~33% larger but avoids any special character issues entirely. Use URL encoding for most cases; use Base64 when your SVG contains many non-ASCII characters or when you need guaranteed compatibility with stricter parsers.

The most common culprit is the # character in SVG (used for hex colors like #fff or fragment IDs). In a data URI, # must be encoded as %23 — otherwise the browser interprets it as a URL fragment separator and truncates the SVG. This tool automatically handles such encoding. Other issues include missing xmlns attribute, unescaped quotes conflicting with CSS syntax, or using reserved characters like <, >, and & without proper encoding.

Simply copy the generated URI and use it in your CSS like this:
background-image: url("data:image/svg+xml,%3Csvg...");
You can also include additional background properties:
background-repeat: no-repeat;
background-size: contain;
background-position: center;
Our tool provides ready-to-use CSS snippets in multiple formats — choose "CSS bg-image" or "Full Rule" from the output format options.

Key characters that require URL encoding: # → %23, % → %25, " → %22, < → %3C, > → %3E, & → %26, and spaces → %20 or +. For Base64 encoding, these characters are automatically handled since Base64 output only contains alphanumeric characters, +, /, and = — all URL-safe within CSS url().

SVG data URIs are supported in all modern browsers including Chrome, Firefox, Safari, and Edge (back to IE9 with some limitations). For IE9-11, Base64-encoded SVGs are more reliable than URL-encoded ones. Mobile browsers on iOS and Android fully support SVG data URIs. Always include the xmlns="http://www.w3.org/2000/svg" attribute for maximum compatibility. Our tool ensures proper encoding for cross-browser support.

Use our built-in Minify SVG button to automatically remove XML declarations, DOCTYPE, comments, and unnecessary whitespace. For further optimization: remove unused namespace declarations, simplify path data using tools like SVGO, reduce decimal precision on coordinates, use shorthand color values (#fff instead of #ffffff), and eliminate redundant <g> groups. A clean, minimal SVG source yields the smallest data URI — critical when embedding in CSS files.

While browsers don't enforce strict limits on data URI length, practical considerations apply: very long URIs (over ~32KB) can slow down CSS parsing and increase file size significantly. For complex or large SVGs, linking to an external SVG file is often more efficient. The encoded data URI is typically ~30-50% larger than the raw SVG. Our tool shows character counts so you can gauge whether your SVG is suitable for inline embedding. For optimal performance, keep data URI SVGs under 10KB encoded.

Yes, SVG data URIs can contain CSS animations, SMIL animations, and even JavaScript (though scripts may be blocked by Content Security Policy). For CSS background SVGs, animations defined within the SVG using <style> tags will work in most modern browsers. However, interactive features like :hover pseudo-classes on SVG elements won't respond when the SVG is used as a background-image — for interactivity, use inline <svg> elements or <img> tags instead.