SVG to CSS Data URI Converter
Paste raw SVG markup to get a URL-encoded data URI you can drop straight into a CSS background-image, plus a live preview of the rendered SVG.
Live preview
Your SVG preview will appear here
Data URI
CSS snippet
Perguntas frequentes
Why use a data URI instead of an external SVG file?
A data URI embeds the SVG directly inside your CSS or HTML, saving an extra HTTP request. It's especially handy for small icons used purely as background-image, where keeping everything in one stylesheet is simpler than managing a separate asset file.
Why is it URL-encoded instead of base64?
URL-encoded SVG data URIs are generally smaller than the base64 equivalent and stay human-readable, which makes them easier to review or tweak directly in your CSS. Browsers support both, this tool uses the more compact, readable option.
Is it safe to paste SVG from an untrusted source?
The preview renders your SVG as an <img>, not injected as live HTML, so embedded scripts inside a malicious SVG won't execute in the preview. Still, treat SVG files like any other file, and only paste markup you trust.