SVG to CSS Data URI Encoder
Paste SVG or drop an .svg file — get URL-encoded and base64 data URIs with ready-to-paste CSS snippets.
Your SVG never leaves the browser — no upload, no server.
~~~
Input
Drop an .svg file here — read locally, never uploaded.
~~~
Options
~~~
Preview
Live preview — script tags are stripped before rendering.
~~~
Output
URL-encoded data URI
Base64 data URI
URL-encoded is smaller for this SVG — usually the better pick for CSS.
background-image
mask-image
<img src>
~~~
About this tool
Inline SVG as CSS background icons using minimal URL encoding — only characters that break CSS (#,%, quotes, angle brackets) get escaped. Compare byte size against base64; for most icons the URL-encoded form wins.
~~~