Skip to content
TextArray
100% local

SVG URL encoder

Convert SVG markup into a CSS-ready data URI and decode data URIs back to SVG.

Input
Output
Related tools
URL encode and decodeEncoding & conversion
Base64 encode and decodeEncoding & conversion
CSS minifierDeveloper tools
Color converterDeveloper tools
Cron expression parserDeveloper tools
CSS formatternewDeveloper tools
SVG URL encoder
Paste an SVG and get a data URI you can drop straight into CSS, ready for background-image or a mask. Instead of base64, the encoder uses the compact URL-encoding approach: it swaps double quotes for single quotes, collapses whitespace, and percent-encodes only the characters that actually need it, so the result stays short and human-readable. That keeps your stylesheet smaller than a base64 blob and lets you still recognise the shapes inside the URI.
Three output formats cover the common cases. The CSS rule wraps the data URI in background-image: url("…"); so you can paste a whole declaration. The bare data URI gives you just the value for a custom property, an <img> src or an SVG mask. The base64 form produces a UTF-8-safe data:image/svg+xml;base64 URI for tools or build steps that expect that encoding, including SVGs with emoji or accented text nodes.
Switch the direction to decoding and the tool reverses any of the three forms back to raw SVG markup. Paste a CSS rule, a bare data URI or a base64 one, and it extracts the SVG so you can edit an icon that only exists inside a stylesheet. The tally shows the input size, the output size and the percentage change, so you can see at a glance whether encoding shrank or grew the icon.
Everything runs in your browser. Your SVG markup is never uploaded, so you can encode private icons, logos and internal assets without them leaving your device.
FAQ
Why use URL encoding instead of base64 for SVG?
URL-encoded SVG is usually smaller than base64 and stays readable, so your CSS is lighter and you can still see the markup. Base64 is offered too for tools that require it.
What are the three output formats?
A full CSS rule with background-image: url(...), a bare data URI value, and a UTF-8-safe base64 data URI. Pick whichever your stylesheet or component needs.
Can I turn a data URI back into SVG?
Yes. Set the direction to decode and paste a CSS rule, a bare data URI or a base64 one; the tool extracts and returns the original SVG markup.
Why does my input need to start with <svg?
Encoding checks that the input looks like SVG, so a stray paste does not become a broken data URI. Markup starting with <svg or <?xml is accepted.
Is my SVG uploaded anywhere?
No. The conversion runs entirely in your browser and your markup never leaves your device.