Paste SVG code or drop an .svg file and get a data URI for CSS, HTML, or React. Compare URL-encoded and Base64 sizes, or decode a data URI back to SVG.
This tool runs entirely in your browser. What you enter is never sent anywhere.Your input is never sent anywhere.
DetailsHow to embed an SVG in CSS as a data URI
A data URI puts the whole image into the URL itself, so a small SVG can live inside your stylesheet or an img tag with no extra file request. This tool turns SVG code into a data URI in two forms, URL-encoded and Base64, and shows the size of each next to the original.
It also minifies the SVG first by removing the XML declaration, DOCTYPE, comments, and metadata, and it adds the xmlns attribute if it is missing. You can then copy a snippet for background-image, mask-image, an img tag, or a Tailwind class.
Switch to Data URI → SVG to go back. Paste a data URI, a full CSS declaration, or an img tag, and the SVG code comes out.
When a data URI is the right tool
Small icons in a stylesheet
Put an arrow, chevron, or checkmark into background-image so a component needs no separate icon file.
Icons that change color
Use the mask snippet to draw the SVG as a shape and set its color with background-color, including hover and dark mode.
Places that cannot link a file
Some templates, snippets, and single-file demos have nowhere to put an image. A data URI keeps everything in one file.
Reading a data URI from someone else's CSS
Paste the long string from a stylesheet and get the readable SVG back to check the viewBox, change a color, or reuse the shape.
Convert in 4 steps
- Choose SVG → Data URI to encode, or Data URI → SVG to decode. Paste your code or drop an .svg file.
- Pick URL-encoded or Base64, and set the options for minifying, xmlns, and color replacement.
- Check the preview and the size comparison to see which form is smaller.
- Copy the result, or a CSS, mask, img, or Tailwind snippet.
Note: The result updates as you type. The swap button sends the result back into the input in the opposite mode, so you can check a round trip.
What the tool changes in your SVG
- Minify: the XML declaration, DOCTYPE, comments, and metadata are removed. Whitespace between tags is removed, and runs of spaces are collapsed to one. The id and class attributes stay. Collapsing spaces also applies to text inside text and style elements.
- xmlns: added only when the svg tag has none.
- Replace fill & stroke: changes fill and stroke attributes and style declarations to one color. none, currentColor, transparent, inherit, and url(#id) values are kept. Other color properties, such as stop-color, are not changed.
- Quotes: inside a tag, double quotes become single quotes when that tag has no single quote already. Any other double quote is written as %22, so the output never has a raw double quote.
- Decoding: the data URI is found inside url(...), an src or href attribute, or a full CSS rule. The first data:image/svg+xml string is used.
- Size warning: shown when the selected form is over 4 KB.
Data URI forms for SVG compared
What each output looks like and where it fits.
| Form | Looks like | Size | Good for |
|---|---|---|---|
| URL-encoded | data:image/svg+xml,%3csvg xmlns='...' | Smallest for SVG, readable | CSS backgrounds, img tags, JSX |
| Base64 | data:image/svg+xml;base64,PHN2Zy... | About a third larger than the source text | Places that need a Base64 value |
| CSS background-image | background-image: url("data:..."); | Same as the form chosen | Icons and patterns in a stylesheet |
| CSS mask-image | mask-image: url("data:..."); background-color: currentColor; | Same as the form chosen | Icons that change color with CSS |
| HTML / JSX img | <img src="data:..." alt="" /> | Same as the form chosen | Components and templates |
| Tailwind CSS | bg-[url('data:...')] | Spaces, quotes, and parentheses are percent-encoded | Utility classes with no extra CSS |
Why URL-encoding usually wins. SVG is text, so the only characters that must be escaped are the few that break a URL or a CSS string, such as #, <, >, and quotes. Base64 rewrites every 3 bytes as 4 characters and hides the content. The size cards above show the byte count of both for your own file.
Cost of inlining. A data URI saves a request for a small image, but the bytes move into your CSS or HTML. The larger the image, the more it slows down every page that loads that file, so keep inlined SVGs small.
Inline SVG in CSS: size limits, colors, and what the browser allows
Practical limits to know before you paste a data URI into a stylesheet.
How small should an inlined SVG be?
Build tools give a rough guide. Vite inlines assets under 4 KiB by default, and webpack 5 asset modules use 8 KB. Above that, a separate file is usually better.
A stylesheet blocks rendering, so a big data URI delays the first paint, and the image cannot be cached on its own. This tool warns once the output passes 4 KB.
Why you cannot recolor a background SVG with CSS
A data URI used as background-image is a separate image. Your page CSS cannot reach inside it, so fill and currentColor on the page have no effect.
The fix is mask-image. The SVG becomes the shape, and background-color paints it, so one data URI works in any color.
What an SVG used as an image cannot do
When SVG is used through img or a CSS background, browsers treat it as an image. External resources are not loaded unless they are inlined as data URLs, and the SVG cannot be interactive.
If you need hover effects inside the SVG, links, or scripts, put the SVG in the page as inline markup instead.
Characters that break a CSS data URI
A raw # in a color, raw angle brackets, a line break inside url(), or an unescaped quote can end the rule early.
The tool percent-encodes these characters and keeps double quotes out of the output, so the string is safe inside url("...").
Common mistakes with SVG data URIs
Choosing Base64 by habit
Base64 feels like the normal way to inline an image, but for SVG it makes the string about a third larger than the source text and unreadable. A later change to the viewBox or color means decoding it first.
💡 See the solution▼
The image is blank because xmlns is missing
An SVG copied from inline HTML often has no xmlns attribute. It displays fine in the page, but as a data URI the browser shows nothing.
💡 See the solution▼
The color cannot be changed from CSS
You set fill or color on the element that has the background, and nothing changes. You end up creating one data URI per color.
💡 See the solution▼
Pasting a CSS rule into a decoder fails
A data URI copied from DevTools or a stylesheet comes with url(...), a property name, or an img tag around it. Many decoders reject that, and you trim it by hand.
💡 See the solution▼
A Tailwind class stops working
Spaces, quotes, or parentheses inside the data URI split the class or end it early, and the style is not generated.
💡 See the solution▼
SVG data URI FAQ
Q.How do I convert an SVG to a data URI?
A. Paste the SVG code into the input box, or drop an .svg file onto it. The tool minifies the SVG and gives you a URL-encoded data URI and a Base64 data URI, with the byte size of each. Copy the result, or copy a ready-made snippet for CSS, an img tag, or Tailwind.
Q.Should I use URL-encoded or Base64 for an SVG?
A. URL-encoded in most cases. SVG is already text, so it can be percent-encoded without much growth, and the result stays readable. Base64 turns every 3 bytes into 4 characters, so the output is about a third larger than the source text. Use Base64 when a system needs a Base64 value or cannot take the special characters that URL-encoding leaves in. The size comparison shows both byte counts for your file.
Q.How do I use a data URI as a CSS background image?
A. Click the CSS background snippet. It wraps the data URI as background-image: url("data:..."); in double quotes, which is the form that works in a stylesheet. A double quote inside the SVG never appears raw in the output, so it cannot end the string early.
Q.Why does my SVG data URI not show up?
A. The most common cause is a missing xmlns attribute on the svg tag. Browsers need xmlns="http://www.w3.org/2000/svg" to draw the SVG as an image, and the Add missing xmlns option inserts it. Other causes are an unencoded # or < in the URI, a line break inside url(), or markup that is not a complete svg element. The tool encodes # and < for you and warns when the input is not <svg> ... </svg>.
Q.How can I change the color of an SVG used as a CSS background?
A. A background image is a separate image, so fill and currentColor set by your page CSS do not reach inside it. You have two options. Use Replace fill & stroke to set one new color before encoding, or use the CSS mask snippet, which uses the SVG only as a shape and paints it with background-color. With the mask, one data URI can take any color, including hover and dark mode colors.
Q.Can I turn a data URI back into SVG code?
A. Yes. Select Data URI → SVG and paste it. Base64, URL-encoded, and charset variants work. You can paste the whole CSS declaration or the img tag, and the tool picks the data URI out of it. A bare Base64 string without the data: prefix also works. Use the download button to save the result as an .svg file.
Q.How large can an inlined SVG be?
A. Keep it small. Vite inlines assets under 4 KiB by default, and webpack 5 asset modules use 8 KB. A data URI that is bigger makes your stylesheet heavier, so the browser cannot cache the image separately. The tool shows a warning above 4 KB so you can decide to load the file normally.
Q.Does the Tailwind snippet work as it is?
A. Yes. A raw data URI can contain spaces, quotes, and parentheses that split or break a Tailwind class. The Tailwind snippet percent-encodes spaces, single quotes, and parentheses, so the whole URI stays in one class name.
Q.Is my SVG uploaded anywhere?
A. No. Encoding, decoding, and file reading all run in your browser, and the tool has no upload step. The SVG is held only in the page while it is open.
Your feedback
makes this tool better.
Tell us which features you'd like, what should be fixed, or which new tool you'd like to see. An engineer reads every submission and uses it to guide development.