Encode plain text to Base64 Data URI
Input
Hello, World!Example output
data:text/plain;charset=utf-8;base64,SGVsbG8sIFdvcmxkIQ==Data URI Generator & Decoder
Web & API100% Client-SideReady
TEXT
0 lines0 chars
0 B
Read-only
0 lines0 chars
0 B
About this tool, examples & FAQ
Encode plain text, SVG vectors, HTML snippets, and JSON data into standard RFC 2397 Data URIs, or decode existing data: URLs back to clean source text with complete client-side execution.
Key facts
| RFC Specification | RFC 2397 (The 'data' URL scheme) |
|---|---|
| Payload Encodings | Base64 (binary safe) and URL Percent-Encoding (compact for SVGs) |
| Maximum Input | 2 MB |
| Execution Deadline | 2 s |
How to use
- Paste your text, SVG markup, HTML, or existing data: URI into the editor.
- Choose 'Encode to Data URI' to generate an inline URL, or 'Decode Data URI' to extract raw content.
- Customize the target MIME type (e.g. image/svg+xml, text/html) or toggle Base64 encoding.
- Click Run (or press Ctrl/Cmd + Enter) to instantly perform the conversion.
- Copy the generated data URI for use in CSS `url()`, HTML `<img>`, or JavaScript source.
Examples
Decode Base64 Data URI back to plain text
Input
data:text/plain;charset=utf-8;base64,SGVsbG8sIFdvcmxkIQ==Example output
Hello, World!Edge cases
SVG Optimization with Percent-Encoding
Base64 encoding increases file size by approximately 33%. For SVG vectors, percent-encoding (`base64: false`) retains readability, compresses better with Gzip/Brotli, and yields smaller CSS bundles.
Full Reversibility (Swap)
Data URI generation and decoding are exact mathematical inverses. You can freely click the Swap button to toggle between encoded Data URIs and original plain text without losing data.
URL-Unsafe Special Characters
When using URL percent-encoding instead of Base64, characters like quotes, hash symbols (#), and parenthesis are properly escaped to prevent CSS url() parsing errors.
How it works
- Validates input text and standard RFC 2397 `data:[<mediatype>][;base64],<data>` format.
- For encoding, packs the payload using standard UTF-8 Base64 or URL percent-encoding according to your options.
- For decoding, strips the `data:` scheme prefix, extracts the MIME type and character set, and decodes the payload.
- Runs entirely within client Web Worker memory with no file uploads or external requests.
Related workflows
Base64 Encoder / Decoder
Encode UTF-8 text to standard or URL-safe Base64 and decode Base64 back to text.
URL Encoder / Decoder
Encode and decode URL components, query parameters, and special characters using RFC 3986 percent-encoding or form-urlencoded format.
HTTP Header Parser
Parse, analyze, and format raw HTTP request and response headers with security, caching, and CORS diagnostics.
URL Parser & Inspector
Decompose, inspect, and analyze URLs into protocol, host, port, path segments, query parameters, and hash fragments.
Frequently asked questions
What is a Data URI?
A Data URI is a uniform resource identifier scheme that allows content creators to embed small files, images, or documents directly inline within web pages or stylesheets rather than referencing external files.
When should I use Data URIs in web development?
Data URIs are ideal for tiny icons, SVGs in CSS background properties, small fonts, or offline single-file HTML documents to eliminate separate HTTP round-trip requests.
Is there a size limit for Data URIs?
While modern browsers support Data URIs of tens of megabytes, practical performance best practices recommend keeping inline Data URIs under 10KB to avoid inflating stylesheet parse times.
References
- RFC 2397 — The 'data' URL Scheme — Defines the official RFC 2397 data URL syntax and semantics