Developer

Data URL Builder

Build and decode text data URLs with MIME type, charset, and Base64 options.

Loading interactive tool…

Embed this tool on your site

About this tool

Data URL Builder turns text into an RFC 2397 data: URL and decodes existing data: URLs back to text with their metadata. A data URL embeds content directly in a URL string, eliminating an HTTP request for the resource; they are widely used to inline small SVGs, HTML snippets and JSON in HTML, CSS and JavaScript. Type or paste text, set the MIME Type and Charset fields, tick Use Base64 if you want Base64, and click Build. Base64 mode encodes the UTF-8 bytes of your text; plain mode uses encodeURIComponent. The charset parameter is always included (utf-8 if left blank). To decode, paste a data URL into the Data URL box and click Decode: the tool shows the decoded text plus mime, charset and base64 flag, and fills the inputs so you can edit and rebuild. Input is text only — there is no file upload, and binary Base64 such as a PNG decodes as unreadable text. Everything runs locally in the browser.

Why use it

  • Eliminate small-asset HTTP requests: Inline tiny SVG icons, loaders, and placeholders as data URLs in CSS or HTML to reduce round-trips, which matters most for assets loaded before first paint.

  • Inline SVG in CSS background-image: CSS background-image cannot reference inline SVG elements. Data URLs solve this — paste your SVG markup, set image/svg+xml, and use the result in url() without a separate file.

  • Portable single-file exports: Embed SVG, HTML or JSON text directly in HTML files, JSON payloads, or templates to create self-contained documents that work without external file references.

  • Debugging encoded payloads: When a text data: URL appears in a network trace, DOM inspection, or a bug report, paste it into the Data URL box and click Decode to read the original content without writing JavaScript.

  • Round-trip editing: Decoding fills the Input Text, MIME Type, Charset and Use Base64 fields, so you can change the content and click Build again.

  • No file upload required: Everything is typed or pasted, and everything stays in the browser tab. Suitable for use in secure or air-gapped environments.

How to use

  1. Type or paste your content into the Input Text box.
  2. Enter the MIME Type (e.g. image/svg+xml, text/html, application/json) and the Charset (utf-8 by default).
  3. Tick Use Base64 for Base64 output, or leave it unticked for percent-encoded plain text.
  4. Click Build to generate the data: URL in the Data URL box; the Decoded Preview and Decoded Meta boxes confirm what it contains.
  5. To decode, paste an existing data: URL into the Data URL box and click Decode to see its text and its mime, charset and base64 values.
  6. Use Copy to copy the data URL, or Clear to reset every field.

When it helps

  • Inlining a small loading spinner SVG or icon in a CSS file as a background-image data URL to eliminate an HTTP request that would block rendering.
  • Embedding a small HTML snippet or text file as a data URL in a link or iframe src for a quick demo.
  • Checking how a JSON or XML string looks when Base64-encoded into a data URL for a test fixture.
  • Decoding an unknown text data: URL found in a DOM attribute, CSS file, or network request to read its MIME type and content during a debugging session.
  • Building test fixtures for unit tests that require a URL input but need to work offline without real asset files or network access.
  • Embedding a JSON configuration or XML payload in an href attribute or a data-config attribute where a URL-shaped value is required by the consuming library.

Examples

SVG icon as CSS background (plain)

Input
MIME Type: image/svg+xml | Charset: utf-8 | Use Base64: off | Input Text: <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6' fill='#f5c842'/></svg>
Expected result
data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%3E%3Ccircle%20cx%3D'8'%20cy%3D'8'%20r%3D'6'%20fill%3D'%23f5c842'%2F%3E%3C%2Fsvg%3E

JSON payload inline (Base64)

Input
MIME Type: application/json | Charset: utf-8 | Use Base64: on | Input Text: {"name":"UtilityKit","version":"1.0"}
Expected result
data:application/json;charset=utf-8;base64,eyJuYW1lIjoiVXRpbGl0eUtpdCIsInZlcnNpb24iOiIxLjAifQ==

Decode existing data URL

Input
data:text/html;charset=utf-8,%3Ch1%3EHello%20World%3C%2Fh1%3E
Expected result
Decoded Preview: <h1>Hello World</h1>
Decoded Meta: mime=text/html | charset=utf-8 | base64=no

Tips

  • For SVG data URLs in CSS, plain percent-encoding is usually shorter than Base64 and is more readable in source files — build both and compare before committing to one format.
  • Keep data URLs under about 4KB for CSS background images. Above that, a separate cached file usually loads faster thanks to HTTP/2 multiplexing and browser cache reuse across pages.
  • Keep a charset parameter on text MIME types: data:text/html;charset=utf-8,... prevents browsers from misinterpreting encoding on HTML payloads containing non-ASCII characters.
  • When embedding data URLs in JSON (e.g. as a field value), remember to JSON-escape the string — the Base64 alphabet is safe, but percent-encoded data URLs may contain quotes that need escaping.
  • Use Decode to audit existing text data URLs in third-party CSS or HTML for unexpected content — data URLs can hide content that is not visible in the surrounding markup.

Frequently Asked Questions

What is the format of a data URL?
A data URL follows the RFC 2397 format: data:[<mediatype>][;base64],<data>. The mediatype is a MIME type optionally followed by charset (e.g. text/html;charset=utf-8). The ;base64 token signals that the data is Base64-encoded. If omitted, the data is URL-percent-encoded text. Example: data:image/svg+xml;base64,PHN2Zy4uLg==
When should I use Base64 encoding versus plain URL encoding?
Base64 is the safe choice for content that will be decoded as bytes, and it avoids escaping issues. Plain URL encoding (Use Base64 unticked) is more readable and often shorter for mostly-ASCII text such as SVG, HTML or JSON. This tool encodes text only: Base64 is applied to the UTF-8 bytes of what you type, and plain mode uses encodeURIComponent.
Is there a size limit for data URLs?
There is no size limit in the RFC, but browsers and environments impose practical limits. Chrome and Firefox support data URLs up to ~2MB in CSS and attribute contexts. Internet Explorer capped them at 32KB. For production use, data URLs over 4–8KB rarely save a net round-trip compared to a properly cached external asset.
Can I use a data URL as an <img src> value?
Yes. <img src='data:image/png;base64,...'> works in all modern browsers and in most email clients. Similarly, CSS background-image: url('data:image/svg+xml,...') is fully supported. Audio and video data URLs work but are less common and may have size and codec restrictions.
Can data URLs execute JavaScript?
In older browser versions, data: URLs with an HTML MIME type and embedded script tags could execute JavaScript when opened in a tab. Modern browsers block script execution in data URLs loaded in top-level navigation (Chrome since 2019, Firefox since 2017) as a security measure. Data URLs as image or CSS values cannot execute scripts.
What is the overhead of Base64 encoding?
Base64 encodes 3 bytes as 4 ASCII characters, adding approximately 33% to the payload size. A 1KB binary file becomes roughly 1.37KB as a Base64 data URL. When gzip or Brotli compression is applied, the overhead is typically reduced to 10–20%, but data URLs embedded in HTML or CSS are usually not independently compressed.
Can I use data URLs to bypass Content Security Policy?
Not reliably. CSP's img-src directive can block data: URLs with img-src 'self'. The data: scheme must be explicitly allowed with img-src data:. Script execution via data: is blocked by default in modern browsers regardless of CSP. Do not rely on data URLs as a CSP workaround — configure your CSP correctly instead.
What MIME type should I use for SVG data URLs?
Type image/svg+xml in the MIME Type field. Paste the SVG markup as Input Text and leave Use Base64 unticked for the readable percent-encoded form, or tick it for Base64; build both and compare the lengths yourself. Note that encodeURIComponent leaves single quotes unescaped, which is fine inside url("...").

Explore the category

URL Encoder Encode and decode URLs Image to Base64 Converter Encode files to data URLs or decode previews. Base64 Encode and decode Base64 strings URL Parser Parse URLs into protocol, host, path, query parameters, and hash parts. Certificate Decoder Decode RSA X.509 certificates from PEM or base64 DER to see subject, issuer, SANs, validity, key size, serial and fingerprints. JWT Decoder Decode and inspect JWT tokens
URL Encoding Explained: Percent-Encoding and Why It Matters A space in a URL becomes %20, a plus sign becomes %2B — but not always, and the rules differ depending on where in a URL you are. This post Jan 2026 · 6 min CSV and TSV: The Universal Data Exchange Format Explained CSV files look trivial until you encounter a value with a comma inside it, a newline in a cell, or a file saved in the wrong encoding. This Mar 2026 · 7 min Data Normalization Explained: 1NF, 2NF, 3NF Without the Jargon Normalization rules sound abstract until you see what a denormalized table looks like after six months of updates. This guide explains the n Mar 2026 · 9 min

Glossary

Data URL (data: URI)
A URI scheme defined in RFC 2397 that allows content to be embedded directly in a URL string rather than referenced as an external resource. Format: data:[mediatype][;base64],<data>.
Base64 encoding
A binary-to-text encoding scheme that represents binary data using 64 printable ASCII characters (A-Z, a-z, 0-9, +, /). Used in data URLs to safely embed binary content like images in text-based contexts (HTML, CSS, JSON).
RFC 2397
The 1998 IETF standard defining the data: URL scheme syntax. It specifies the mediatype, optional charset parameter, optional ;base64 token, and the data payload format.
Content Security Policy (CSP)
An HTTP response header that restricts what resources a page can load. The data: scheme for img-src, object-src, and script-src must be explicitly whitelisted in CSP directives; it is not permitted by default.
MIME type (mediatype)
The type/subtype identifier (e.g. image/png, text/html) embedded in the data URL that tells the browser how to interpret the payload. If omitted, browsers default to text/plain;charset=US-ASCII.
Percent-encoding
The URL encoding scheme used in plain-text (non-Base64) data URLs to represent characters outside the safe URL character set. Less space-efficient than Base64 for binary data but more readable for text content.
A LITTLE HELP. A LOT DONE.
Good tools.
Great flow.

Your shortcut to the everyday. Create, convert, calculate,
and get back to what you love.

✓ Free to use✓ No sign-up✓ 500+ possibilities