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.
~~~
Read more
~~~
Free books, courses, and software
Get my programming books, course editions, and complete software.
Get the download library →