SVG to Data URI Converter
Paste SVG code or drop a file — get an optimized data URI with a live preview.
Advertisement
or drag & drop an .svg file here
preview appears here
Why inline SVG as a data URI?
Embedding the SVG directly in your CSS (background-image: url("data:image/svg+xml,…")) or HTML removes an HTTP request — perfect for icons and small decorative graphics. Percent-encoding keeps the URI smaller and more readable than base64 for typical SVGs.
Encoding notes
The tool strips XML declarations and comments, collapses redundant whitespace, and encodes with encodeURIComponent (so # becomes %23 — required for SVGs used in CSS). Double quotes are kept as-is so the URI stays valid inside CSS url("…").
FAQ
Why use an SVG data URI instead of a file?
A data URI inlines the SVG directly into your CSS or HTML, eliminating an HTTP request. It is ideal for small icons and decorative graphics where a separate file would add latency.
Should I use UTF-8 or base64 encoding?
UTF-8 with percent-encoding (what this tool produces) is smaller and stays human-readable for typical SVGs. Base64 is only better when the SVG contains lots of non-ASCII characters.
How do I use the data URI in CSS?
Paste it as a background value: background-image: url("data:image/svg+xml,..."); Keep the surrounding quotes — they protect against parentheses and spaces in the encoded SVG.
Is my SVG uploaded to a server?
No. Encoding and the live preview run entirely in your browser. Your SVG never leaves your device.
Advertisement