Skip to content
ToolQivo

Data URI Generator

Turn text, SVG or a small file into a data: URI you can inline anywhere.

Developer Tools Reviews Free · no sign-up

Or drop a small file here — it is read locally and never uploaded

Quick Tool Overview

The Data URI Generator turns pasted text, SVG markup or a dropped file into a data: URI, comparing Base64 against percent-encoding so you can take the smaller, and giving you the CSS and HTML lines to use it.

What it does
Builds a data: URI from text, SVG or a file
You give it
Markup, text or a small file
You get back
The URI plus ready-to-paste CSS and HTML
Best for
Inlining icons, SVG backgrounds and small assets
Developer Tools Free, unlimited use No sign-up Runs in your browser

About the Data URI Generator

A data URI embeds a whole file in a single string, so an image, a font or an SVG can live inside a stylesheet or a page instead of costing a request. Paste text or drop a file and you get the URI plus the CSS and HTML lines to use it.

The encoding choice matters more than people expect. Base64 works for anything but adds about a third to the size. Percent-encoding is usually smaller for SVG, because most of an SVG is already URL-safe characters — which is why every guide to inlining SVG in CSS recommends it. The tool shows both sizes so you can pick the smaller one, and warns when the result is large enough that a separate file would have been the better call.

Key features of the Data URI Generator

Both encodings compared

Base64 and percent-encoding are both sized, because for SVG the percent-encoded form is usually noticeably smaller.

Snippets included

A CSS background-image line and an HTML tag come with the URI, already escaped for the context they go in.

MIME type detected

A dropped file brings its own type; pasted text gets a picker with the types that actually get inlined.

Size warning

When the result grows past the point where a separate cacheable file would be better, the tool says so.

Files never upload

A dropped file is read locally with the File API and encoded in the tab.

How to use the Data URI Generator

  1. 1

    Paste text or drop a file

    SVG markup, an icon, a small image or any text.

  2. 2

    Set the MIME type

    Detected from a dropped file, or chosen from the list for pasted text.

  3. 3

    Compare the encodings

    Base64 or percent-encoding, with both sizes shown so you can take the smaller.

  4. 4

    Copy the snippet

    The URI, a CSS background line and an HTML tag are all ready to paste.

Frequently asked questions

For small assets used immediately — an icon, a tiny background, an inline SVG. It trades one request for a larger, uncacheable document, so it stops paying off somewhere around a few kilobytes.

Reviews of the Data URI Generator

What people who use the Data URI Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Data URI Generator. It takes half a minute and no account.

Write the first review

More developer tools