What is the data uri to svg?
The Data URI to SVG decoder converts a data:image/svg+xml URI back into clean, editable SVG markup. It auto-detects base64 or URL-encoded payloads pulled from CSS, an img src or a minified bundle, shows a live preview, and downloads a .svg file. Free and fully in-browser, nothing is uploaded.
The GigAI Data URI to SVG decoder reverses the inlining that hides so many SVGs inside stylesheets, HTML and JavaScript bundles. Paste any data URI that begins with data:image/svg+xml. Whether it is base64-encoded (…;base64,PHN2Zy…) or the URL-encoded, percent-escaped form that CSS tooling prefers (…,%3Csvg…), and it detects the encoding, decodes the payload with the browser's own primitives, and hands you back the exact SVG source. The recovered markup renders live in a checkerboard preview so you can confirm it is the right graphic, sits in an editor you can copy from, and downloads as a real.svg file in one click. It gracefully strips an optional;charset=utf-8 marker, tolerates the surrounding url("…") and quotes people paste by accident, and tells you plainly when a string is a PNG/JPEG data URI or simply malformed rather than silently producing garbage. Because every byte is decoded on your device with no network round-trip, a data URI pulled from a private stylesheet, an internal component or a client's bundle never leaves your machine. It is the fast, honest way to get editable SVG back out of a URI someone else inlined.
- Difficulty:
- Easy
- Typical time:
- ~10s
- Processing:
- 100% browser processing
- Converts:
- URI → SVG
Last updated
How to use the data uri to svg
- 1
Paste your data URI
Drop in a string that starts with data:image/svg+xml. Base64 or URL-encoded. You can paste the raw URI or the whole url("…") wrapper. The decoder handles both.
- 2
Watch it decode instantly
The tool detects the encoding, decodes the payload, and shows the recovered SVG markup beside a live preview of the graphic. No button to press.
- 3
Check the preview
Confirm the decoded artwork is what you expected. Switch the background or zoom to inspect a thin stroke or a transparent fill.
- 4
Copy or download the SVG
Copy the clean markup, or download it as a .svg file ready to open, commit, or optimize further.
What Data URI to SVG includes
Base64 and URL-encoded, auto-detected
Paste either flavour, the base64 form ending in;base64,PHN2Zy… or the percent-escaped %3Csvg… form CSS tools emit, and the decoder recognises the encoding for you and applies the right transform.
Live preview of the decoded graphic
The recovered SVG renders in a checkerboard canvas with light/dark backgrounds and zoom, so you can confirm you decoded the right icon before you save it. Not just a wall of markup.
Tolerant of real-world paste
A stray url("…") wrapper, surrounding quotes or an optional;charset=utf-8 marker won't trip it up, the decoder unwraps the noise and focuses on the payload.
Copy or download as .svg
Copy the clean markup to your clipboard or download it straight to a real .svg file, ready to open in a design app, drop into a repo, or run through the SVG Optimizer.
Honest, specific errors
If you paste a PNG or JPEG data URI, a broken base64 string, or something that isn't a data URI at all, it says so clearly instead of returning a blank or corrupt result.
Decoded entirely on your device
Every byte is decoded in your browser with native APIs. The URI and the SVG it hides never touch a server, so private or client artwork stays private.
Why use our data uri to svg
Recover editable SVG from anywhere it's inlined
CSS backgrounds, img src attributes, Tailwind arbitrary values and minified bundles all hide SVGs as data URIs. This pulls the original markup back out so you can edit, re-theme or re-export it.
Confirm what a URI actually contains
A data URI is opaque until you decode it. The live preview shows you the real graphic instantly, so you can verify an asset in a stylesheet or component without guessing.
One step in a round-trip workflow
Decode a URI here, tidy it in the SVG Optimizer, then re-inline it with the SVG to Data URI tool: a clean loop for maintaining inlined artwork.
Private by design
Decoding runs locally in your browser. A data URI copied from an internal stylesheet or a client's bundle is never uploaded, stored or logged.
Built for the way you work
From quick one-off fixes to daily workflows, see how people put this tool to use.
- Frontend developer
Extract an icon from a CSS background
Grab the data:image/svg+xml URI out of a background-image rule, decode it here, and get an editable .svg you can move into your icon set instead of leaving it buried in a stylesheet.
- Design-system engineer
Audit inlined assets in a bundle
Paste data URIs pulled from a minified build to see exactly which SVGs they contain and whether any are duplicated or oversized before you refactor.
- Designer / illustrator
Reopen an inlined graphic
Turn a data URI a developer sent you back into a real .svg file you can open in Figma or Illustrator, tweak, and hand back.
- Technical writer / educator
Show what a data URI holds
Decode a sample URI live to demonstrate how base64 and URL-encoded SVG payloads map back to plain markup.
Supported formats
Accepts Data URI, and produces SVG, all processed locally in your browser.
- Data URI
- SVG
Frequently asked questions
Recommended tools
SVG to React
Convert SVG to a clean React component in your browser, camelCased attributes, TypeScript or JS, memo, forwardRef and React Native output, with a live preview. Nothing is uploaded.
SVG Optimizer
Minify and clean SVG files in your browser with SVGO, strip editor metadata, round coordinates, drop hidden layers and see the exact bytes and percentage saved. Nothing is uploaded.
SVG Viewer
Open, paste or drop an SVG to view it on a checkerboard, light or dark canvas with zoom, live dimensions, a source-code pane and a full element/color report: 100% in your browser, nothing uploaded.
Image Compressor
Shrink JPG, PNG and WebP images without a visible quality drop. Set the quality yourself, or compress to an exact target size like 100 KB. Free, entirely in your browser.
SVG to CSS
Convert SVG to a CSS background-image or mask rule in your browser: a compact URL-encoded data URI with a ready selector snippet, live preview and one-click copy. Nothing is uploaded.
PNG to SVG
Convert PNG, JPG or WebP to SVG in your browser: trace a raster image into clean, scalable vector paths with adjustable colors and detail, then copy or download the SVG. Nothing is uploaded.
Common problems, solved
Hit a snag? Here are quick fixes for the issues people run into most.
It says the string isn't an SVG data URI.
The URI must begin with data:image/svg+xml (optionally followed by ;charset=utf-8 and/or ;base64) and then a comma. Remove any text before data: and make sure you copied the whole string, including the comma that separates the header from the payload.
The decoded payload isn't recognised as SVG.
The header claims image/svg+xml but the decoded bytes don't contain an <svg> element. The URI is likely truncated or was corrupted on copy. Re-copy the complete URI from its source and paste it again.
My PNG or JPEG data URI won't decode.
This tool decodes SVG (vector) data URIs only. A data:image/png or data:image/jpeg URI is raster image data, not markup, there's no SVG inside it to recover.
Decoding fails on a base64 URI.
The base64 payload may be incomplete or contain whitespace/line breaks that broke it during copy. Ensure you pasted the full …;base64,<payload> string with no missing characters, then try again.
Get the most out of it
You can paste the whole url("data:image/svg+xml,…") wrapper, the decoder strips url(), quotes and an optional;charset before decoding.
URL-encoded (percent-escaped) SVG data URIs are usually smaller than base64 ones. Both decode to the identical SVG here.
Run the decoded markup through the SVG Optimizer to clean editor metadata before re-inlining it with SVG to Data URI.
If the preview looks blank, the source SVG may lack a viewBox or paint a white shape, switch the preview to a dark background to check.
Only image/svg+xml URIs decode to SVG. A PNG or JPEG data URI is raster data and won't produce markup here.
What's new
Recent updates and improvements to the data uri to svg.
Initial release: decode base64 and URL-encoded data:image/svg+xml URIs to raw SVG, with encoding auto-detection, a live preview, and copy/download as.svg.
Added tolerant paste (url("…") wrappers, surrounding quotes, optional ;charset marker), curated examples, keyboard shortcuts and undo/redo.
Clearer, more specific error messages that distinguish a non-SVG data URI, a raster (PNG/JPEG) URI, and a truncated or corrupt payload.
Keep exploring
Problems we solve
Definitions
From the blog
Explore categories
Compare formats
Common tasks
Your privacy is built in
Decoding happens entirely in your browser using its native APIs, the data URI and the SVG it contains are never uploaded to any server. Nothing is stored, logged or transmitted, so you can safely decode URIs pulled from internal stylesheets, private components or client bundles. Close the tab and every trace is gone.
- Runs in your browser
- No uploads
- Nothing stored
Ready to try the data uri to svg?
Free, private and instant. Data URI to SVG runs right in your browser.