Data URI Generator
Build standards-shaped data URLs from trusted text content with explicit media type, charset, and encoding choices.
Paste a small SVG, text snippet, HTML sample, CSS snippet, or JSON value that you want to turn into a data URL.
Data URI Settings
Options
Percent encoding is often readable for SVG and text. Base64 can be useful when content contains many special characters or when you prefer a compact encoded block.
Output
Copy the generated data URI, HTML snippet, CSS url(), or JSON details.
Generated data URI output will appear here.
Creating Data URLs for Small Snippets
A data URI lets you place small content directly inside a URL. It can hold plain text, SVG, HTML, CSS, JSON, and other text-based content types. This is useful when you need a small self-contained asset or a quick test value.
A data URL is a media-type declaration followed by inline data. RFC 2397 defines the shape as data:[mediatype][;base64],data; without ;base64, bytes outside the URL-safe range are percent encoded.
Small SVG icons, short test payloads, documentation examples, and isolated browser experiments are the sensible end of the spectrum. For text and SVG, percent encoding often stays easier to inspect; Base64 can be more convenient when the payload contains many reserved characters. Large assets lose normal file caching and can make source harder to inspect.
Specification: RFC 2397 — The data URL scheme.
Data URIs Are Best for Small Content
Data URIs are convenient, but they can make HTML and CSS heavier when the content is large. A small SVG or short text snippet is usually fine. A large image, long document, or big JSON file is usually better kept as a separate file.
Use data URIs for small assets, examples, experiments, and quick testing. For production pages, check performance, caching, and readability before inlining too much content.
Example Data URI
Plain text input:
Hello from Yoryantra
Generated data URI:
data:text/plain;charset=utf-8,Hello%20from%20Yoryantra