Data URI to SVG
Decode base64 and encoded SVG Data URIs back to clean SVG XML markup.
SVG Formatter
About Data URI to SVG
The Data URI to SVG Decoder extracts and reconstructs clean, formatted XML vector code from Base64 and URL-encoded `data:image/svg+xml` strings with 1-click preview and `.svg` vector file export.
How to Use Data URI to SVG
Step 1
Paste your `data:image/svg+xml...` URI or CSS `url(...)` rule into the editor.
Step 2
Click "Decode to SVG".
Step 3
Inspect the live rendered vector graphic preview.
Step 4
Click "Copy SVG Code" or "Download .svg".
Practical Use Cases for Data URI to SVG
Extracting SVGs from CSS Stylesheets
Decode obscured `background-image: url("data:image/svg+xml;base64,...")` strings extracted from compiled CSS stylesheets into editable SVG files.
Recovering Vector Assets from Web Scraping
Convert data URIs scraped from webpage `<img src="data:...">` tags back into pristine standalone SVG files.
Input & Output Examples
Decoding Base64 Data URI
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIGZpbGw9IiMzYjgyZjYiLz48L3N2Zz4=
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <circle cx="12" cy="12" r="10" fill="#3b82f6"/>\n</svg>
Key Features & Performance
- ✓Decodes both Base64 and UTF-8 percent-encoded `data:image/svg+xml` strings.
- ✓Auto-detects and removes surrounding CSS wrapper syntax (`url("...")`).
- ✓Prettifies and validates the recovered SVG XML markup.
- ✓100% Client-Side decoding.
- ✓1-Click Copy SVG and 1-Click `.svg` file download.
Key Terminology & Definitions
Base64 Decoding
The mathematical reverse process of converting a 64-character ASCII string back into UTF-8 text or raw binary data.
URL Percent-Decoding
Converting URI escape sequences (like `%20`, `%3C`, `%3E`, `%23`) back into their literal text characters.