liminfoData URL Generator
Free web tool: Data URL Generator
About Data URL Generator
The Data URL Encoder & Decoder converts text-based content — including plain text, SVG markup, HTML fragments, CSS, and JSON — into a data: URI that can be embedded directly in HTML src attributes, CSS url() values, or HTTP headers. You choose between Base64 encoding (using btoa with URI-safe encoding) or URL percent-encoding via encodeURIComponent, and you can either select a MIME type manually (text/plain, image/svg+xml, text/html, text/css, application/json) or let the tool auto-detect it by inspecting the input for SVG, HTML, and JSON patterns.
Data URLs are widely used by web developers to inline small assets — such as SVG icons and CSS data images — directly into stylesheets or HTML without a separate network request. They are also useful for embedding configuration blobs, passing content through query strings, and testing how a browser renders a specific MIME type. The tool's encode mode produces a complete data: URI string with the correct scheme, MIME type, optional ;base64 flag, and encoded payload, while the decode mode extracts and displays the original content from any valid data: URI you paste in.
All encoding and decoding runs entirely in the browser using the native btoa/atob functions combined with encodeURIComponent/decodeURIComponent for safe Unicode handling. The character count of the produced Data URL is displayed in real time so you can see immediately whether the output is within the size limits of your target environment. No files, tokens, or text content ever leave the browser tab.
Key Features
- Encode mode: convert text, SVG, HTML, CSS, or JSON into a complete data: URI
- Decode mode: paste any data: URI and instantly see the original content
- Auto-detect MIME type from input — recognizes SVG, HTML, and JSON patterns automatically
- Choose between Base64 (btoa) encoding or URL percent-encoding (encodeURIComponent)
- Manual MIME type selector: text/plain, image/svg+xml, text/html, text/css, application/json
- Real-time character count of the generated Data URL displayed alongside the output
- One-click copy button with visual "Copied!" confirmation feedback
- 100% client-side — no content is sent to any server at any point
Frequently Asked Questions
What is a Data URL?
A Data URL (also called a data: URI) is a URI scheme that embeds file content directly in a string rather than linking to an external resource. The format is data:[<mediatype>][;base64],<data>. Web browsers can render data URLs in img src, CSS url(), iframe src, and other places where external URLs are accepted, making them useful for inlining small assets.
What is the difference between Base64 and URL encoding for Data URLs?
Base64 encoding converts binary content to ASCII characters using the base64 alphabet, marked with ;base64 in the Data URL. The result is about 33% larger than the original. URL encoding (percent-encoding) replaces special characters with % sequences and is typically shorter for text-heavy content like SVG or HTML, but the output is not marked with ;base64.
How do I encode an SVG as a Data URL?
Paste your SVG source code into the input area. The tool will auto-detect the MIME type as image/svg+xml. Select either Base64 or URL encoding, and the complete data:image/svg+xml; URI will appear immediately. You can use this URI directly in an HTML img tag or CSS background-image property.
Why does the tool use encodeURIComponent with btoa instead of plain btoa?
The native btoa() function only handles Latin-1 characters. To safely encode strings that contain Unicode (multibyte) characters, the tool first converts the string to a URI-encoded percent sequence with encodeURIComponent, then passes the result through unescape() before calling btoa(). This ensures that characters like Korean, Japanese, or emoji encode and decode correctly without throwing an "invalid character" error.
What MIME types are supported?
You can select text/plain, image/svg+xml, text/html, text/css, and application/json from the dropdown. If you choose "Auto-detect", the tool checks whether the input starts with <svg, <?xml, or a <…html pattern (for SVG/HTML) or { / [ (for JSON), and applies the appropriate MIME type automatically.
Is there a length limit on Data URLs?
The tool itself has no limit. However, browsers and environments impose their own limits: most modern browsers support Data URLs up to about 2MB, but older Internet Explorer versions capped them at 32KB. CSS data URLs in some browsers are capped at 8KB. For large assets, a regular URL reference is almost always preferable.
How do I decode a Data URL back to text?
Switch to Decode mode using the tab at the top. Paste your full data: URI (starting with "data:") into the input field. The tool will automatically detect whether it is Base64-encoded (;base64 present) or URL-encoded and display the decoded content. The result can be copied with the Copy button.
Can I use a Data URL for images?
This tool encodes text-based content (SVG, HTML, CSS, JSON, plain text). For binary images like PNG or JPEG, you would need to read them as binary and Base64-encode the raw bytes, which requires a file reader approach not covered here. SVG images, however, are XML text and work perfectly with this tool.