SVG to data URI (CSS and HTML)
Convert SVG code into an optimized data URI for use in CSS (background-image, mask) and HTML, with URL encoding that is shorter than Base64 and an image preview.
How to usePaste the SVG code.
Available in: 
SVG to data URI (CSS and HTML): what it is for
Paste the SVG code and choose the output format. The tool removes extra whitespace, swaps quotes and encodes only the characters that need it, producing a data URI smaller than Base64, and shows a preview of the image and the final size.
The code is not sent to any server: the conversion happens in your browser.
How to use
- Paste the SVG code.
- Choose CSS, data URI, img or Base64.
- Copy the result.
When to use it
- Embedding icons in CSS without extra files.
- Using SVG in mask-image.
- Reducing page requests.
Frequently asked questions
Why not use Base64?
For SVG, URL encoding usually produces a smaller result than Base64, because SVG is already text. Only special characters, such as <, >, # and quotes, need to be encoded.
How do I use it in CSS?
Copy the result in the background-image: url("data:image/svg+xml,...") format. It also works in mask-image, list-style-image and the src attribute of an img tag.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.