SVG to Data URI Converter
Convert SVG markup into a compact percent-encoded data URI for CSS backgrounds and HTML image sources.
Start with your input
Edit the example or replace it with your own text.
How to use SVG to Data URI Converter
- Choose or enter the input shown above.
- Check the format, units and important limitations.
- Select “Encode SVG” and review the result.
How svg to data uri converter works
The converter validates the SVG root element and percent-encodes the markup into a data:image/svg+xml URI. Markup is URL-encoded rather than Base64-encoded to keep ordinary SVG text compact.
Important limitations
A data URI is not a security sanitizer. Do not embed untrusted SVG in a privileged page; SVG can contain active or external content.
Check the result before using it
Try the output in the app, device or workflow that requested it. Review the visible content and format before replacing an original file or sharing a generated link. Browsers and other services can handle edge cases differently, so keep a source copy when the input matters. This tool does not guarantee that a receiving service will accept every result.
Example input
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="black"/></svg>
Can I use an SVG data URI in CSS?
Yes. Copy the generated data URI into a CSS url() value or an HTML image source, subject to your content security policy.
Is input uploaded?
Processing takes place in your browser. This tool does not send your input or selected files to a conversion API.