SVG to Data URI Converter
Paste the code of an SVG and get a data address ready for a CSS background, an image tag or an icon. Only the characters that need it are encoded, so the result stays short.
Este conteúdo está em inglês.
Exemplos resolvidos
A small square
<svg width="10" height="10"><rect width="10" height="10" fill="#ff4a1f"/></svg>
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='10' height='10' fill='%23ff4a1f'/%3E%3C/svg%3E");
The namespace is added and the hash in the colour is encoded.
As Base64
<svg xmlns="http://www.w3.org/2000/svg"><circle r="4"/></svg>
data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxjaXJjbGUgcj0nNCcvPjwvc3ZnPg==
Only the data address is returned.
Sobre SVG to Data URI Converter
This converter turns SVG code into a data address. Paste the SVG, choose CSS, a plain address or an HTML image tag, and copy the result into your stylesheet or page.
Comments and extra spaces are removed, the SVG namespace is added if it is missing, and double quotes are swapped for single quotes so the address can sit inside a quoted CSS value. Only the characters that need encoding are encoded, so the result stays short. A preview shows the picture.
Como usar SVG to Data URI Converter
- Paste your SVG code, or open an .svg file.
- Choose the output and the encoding.
- Copy the result.
Usos comuns
- Embedding a small icon in a stylesheet
- Setting an SVG as a CSS background
- Saving a file request for tiny graphics
- Putting an SVG into an HTML email
Perguntas frequentes
Which encoding should I choose?
Encoded text is shorter than Base64 for most icons and stays readable. Choose Base64 if you need to avoid percent signs.
What is changed in my SVG?
Comments and extra spaces are removed, the namespace is added if needed, and double quotes become single quotes. The picture itself is not changed.
Does it work for large SVGs?
It does, but data addresses make stylesheets bigger. Keep them for small icons and use files for large graphics.
Why does my SVG not show in the preview?
It may be missing its width, height or viewBox, or have invalid markup. Check the code in an editor.