How to use SVG to Data URI Converter
- Paste a small SVG using the supported markup subset.
- Choose percent encoding or Base64.
- Convert it and copy the URI or CSS declaration.
Example: SVG to Data URI Converter
Encode a small red rectangle.
You add
SVG: <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="10" height="10" fill="#ff0000"/></svg>. Encoding: percent.
You get
The result starts data:image/svg+xml, and the hash in the fill color is encoded as %23.
Supported inputs and limits
Up to 128 KiB of supported SVG markup. Scripts, event handlers, external references and unsupported constructs are refused. No pasted SVG is rendered inline. Encoding changes representation, not geometry or file complexity; it is not an SVG optimizer.
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
Embedding does not remove SVG complexity
A data URI packages the markup into a string. It does not simplify paths, make external content local or guarantee image support. The supported subset and input cap keep this conversion bounded.
Questions about SVG to Data URI Converter
Why is the hash in a color encoded?
An unescaped hash can start a URI fragment. Percent encoding keeps it inside the SVG data.
Does Base64 reduce the size?
Usually it increases the encoded length. Percent encoding may be shorter for simple SVG, so compare the actual outputs.
Will currentColor use the surrounding text color?
An SVG used as a CSS image is a separate image context. Do not assume the surrounding element’s text color carries into it.