Convert SVG code into a CSS background-image data URI. Use SVGs directly in CSS without extra HTTP requests.
This tool converts an SVG file into a CSS background-image property using a data URI. A data URI encodes the file contents directly into the CSS string so the browser does not need to make a separate HTTP request to load the SVG. This can improve performance for small icons and decorative SVGs that are used as CSS backgrounds.
The output is a complete CSS background-image property that you can paste directly into your stylesheet. The SVG is encoded using URL encoding which keeps the output readable and is well supported in all modern browsers.
Use SVG data URIs for small decorative SVGs like icons, patterns, and dividers that are applied as CSS backgrounds. For SVGs that are part of the content and need to be accessible to screen readers, inline SVG in HTML is a better choice. For large SVGs, separate files loaded with img tags or background-image with a URL are more practical because they can be cached by the browser.
A data URI embeds the SVG directly in the CSS which eliminates an HTTP request. For small SVGs this can be faster because the browser does not need to wait for a separate file to download. The trade-off is that data URIs cannot be cached separately from the CSS file and they make the CSS file larger.
Most browsers support data URIs up to 32MB but in practice you should keep SVG data URIs under a few kilobytes. Large data URIs increase CSS file size, cannot be cached effectively, and slow down page rendering. For large SVGs use a separate file referenced by URL.
Yes. Everything runs in your browser. Your SVG code is never sent to any server.