SVG to CSS Data URI
Convert SVGs into inline CSS ready data URIs, in both URL-encoded and base64 formats, with a ready-to-paste CSS snippet.
Data URI
CSS snippet
How it works
- 1
Paste or upload your SVG
Paste SVG code directly into the box, or click Upload SVG to load a file from your device.
- 2
Choose an encoding format
URL-encoded is selected by default and usually produces a smaller result. Switch to Base64 if your use case specifically requires it.
- 3
Copy the data URI
Click Copy next to the Data URI output to copy just the encoded string.
- 4
Or copy the ready-made CSS snippet
Click Copy next to the CSS snippet to get a complete background-image rule, ready to paste into a stylesheet.
- 5
Check the size comparison
The note below the output shows the original SVG size versus the encoded size, useful for deciding whether inlining is worth it for this particular file.
About the SVG to CSS Data URI
Inlining a small SVG directly into CSS as a data URI avoids a separate network request, which can genuinely help performance for icons and small decorative graphics used across a site. This tool handles the encoding for you, in both URL-encoded and base64 formats, and generates a ready to paste CSS snippet alongside the raw data URI.
URL-encoded versus base64, and why it matters
Base64 encoding is the more familiar option, but it typically adds around 33 percent to the encoded size compared to the original text, since base64 represents binary data using a fixed set of readable characters. URL encoding, which percent-encodes only the specific characters that are not valid inside a CSS url() value, usually produces a noticeably smaller result for SVG specifically, since SVG is already plain text. This tool defaults to URL-encoded for that reason, with base64 available as a toggle for cases where it is specifically required, such as certain legacy tooling or contexts outside CSS.
What the encoding step actually does
A raw SVG cannot be dropped into a url() value as is, since characters like double quotes, hashes, and parentheses have special meaning in CSS and need to be escaped or replaced. This tool swaps double quotes for single quotes, collapses unnecessary whitespace between tags, and percent-encodes the remaining reserved characters, following the same URL-encoding approach commonly recommended for inlining SVG in CSS.
When inlining makes sense, and when it does not
Inlining works best for small, frequently reused icons where avoiding a network request outweighs the benefit of the browser caching a separate file. For a large, complex illustration, or an SVG used identically across many separate pages, a regular linked file is often the better choice, since the browser only needs to download and cache it once. The size comparison shown below the output helps you judge whether a given SVG is a good candidate for inlining.
Runs entirely in your browser
All encoding happens client side, nothing you paste or upload is sent to a server. If you need this same SVG encoded specifically for a React Native Image component instead of CSS, our SVG Code Editor also includes a Copy Data URI option built around that use case, part of the same Developer Utilities collection this tool belongs to.
Frequently asked questions
When should I inline an SVG instead of linking to a file?
Inlining works well for small, frequently used icons where saving a network request matters more than browser caching the file separately. For larger or reused illustrations, a linked file is usually better.
Should I use URL-encoded or base64?
URL-encoded is recommended for CSS use, since it typically produces a smaller result for SVG, which is already plain text. Base64 is mainly useful when a specific tool or platform requires that format.
Why does the tool replace double quotes with single quotes?
A CSS url() value is often wrapped in double quotes, so any double quotes inside the SVG markup itself need to be changed to single quotes to avoid breaking the CSS syntax.
Does inlining an SVG affect how it can be styled with CSS?
An SVG inlined as a background image through a data URI cannot have its individual internal elements targeted with CSS, since it is treated as a single image, not part of the DOM. For SVGs that need dynamic styling, inlining the raw SVG markup directly in HTML is a better approach.
Is there a size limit for the data URI?
There is no limit enforced by this tool, but very large encoded strings can make stylesheets harder to read and maintain, which is part of why inlining is best suited to small, simple graphics.
Is my SVG uploaded to a server when I use this tool?
No, all encoding happens entirely in your browser. Nothing you paste or upload is sent anywhere or stored.
Can I use this same output outside of CSS?
The base64 format works in most contexts that accept a data URI, including an HTML img tag's src attribute. For a React Native specific workflow, our SVG Code Editor's Copy Data URI feature is built around that exact use case.