Why is URL-encoding smaller than base64 for SVG?

Base64 mechanically turns every 3 bytes of input into 4 ASCII characters — a fixed ~33% size penalty, regardless of content. SVG is already mostly ASCII (tags, attribute names, path letters, digits), so URL-encoding leaves all of that untouched and only escapes the few characters that are unsafe inside `url(...)` — chiefly ` `, `#`, `%`, and double quotes. For a typical icon you escape maybe 5-10% of the bytes instead of inflating 100% of them, which is why URL-encoding usually lands 20-40% smaller. The size diff in this tool shows the exact numbers for your file.

Why must the `#` character be escaped?

Inside a data URI, `#` starts the URL fragment identifier — the browser treats everything after it as an anchor, not as part of your SVG. An unescaped `fill="#ff0000"` would silently truncate the image at the `#`. So `#` becomes `%23`. The same logic applies to `%` (it's the escape character itself, so a literal one must become `%25`) and the angle brackets that delimit XML tags. This tool escapes exactly that set and nothing more, which keeps the output both correct and compact.

How large an SVG can I reasonably inline?

There's no hard browser limit on data URI length in modern browsers, but inlining trades a network request for bytes baked into your CSS/HTML that can never be cached separately. The practical sweet spot is small assets: icons, logos, simple decorative shapes — anything under ~4-8 KB encoded. Past that you lose the caching win and bloat the file that references it. For a large or complex illustration, link to an external `.svg` instead. If you're chasing the smallest possible inline size, run the SVG through svg-optimizer first, then encode here.

Should I keep the optimize option on?

It only removes XML comments and collapses runs of whitespace between tags — both safe, both shrink the bytes you're about to encode. It deliberately does not touch path data, attribute values, or element structure, so it can't break rendering. Leave it on unless you have a reason to preserve comments (e.g. a license header you're legally required to ship inline).

Does the CSS output need single or double quotes?

This tool wraps the data URI in double quotes inside `url("...")` and, for URL-encoding, escapes any double quotes in the SVG so they can't terminate the string early. Both `url("...")` and `url('...')` are valid CSS; double quotes are the safer default because SVG attribute values themselves conventionally use double quotes far less often than single. Copy the rule as-is and it drops into a stylesheet without edits.

Inline a CSS background icon without an extra request

You have a small chevron or search icon used in one component and you don't want a separate `.svg` file (and its HTTP round-trip) just for it. Paste the SVG here, leave URL-encoding selected, and copy the CSS output — `background-image: url("data:image/svg+xml,...")`. Drop it straight into your component's stylesheet. The icon ships inside the CSS, renders on first paint with no flash of missing image, and your network panel shows one fewer request. For a sprite of many icons this adds up fast.

Embed a logo in an HTML email

Email clients block external images by default and many strip ` ` blocks, so the reliable way to show a small vector logo is an inline data URI on an ` ` tag. Paste the logo SVG, switch the output to the HTML ` ` flavour, and copy. Note many older email clients (Outlook desktop) don't render SVG at all — for those, rasterize with svg-to-png-converter first and inline the PNG via base64-image-converter. Use this tool when your audience is on modern webmail (Gmail, Apple Mail) where SVG is supported.

Ship a Tailwind / CSS custom property full of vector art

You want a reusable `--icon-check: url(...)` custom property so any element can pull in the same SVG via `background-image: var(--icon-check)`. Paste the icon, copy the bare data URI output, and assign it to the variable in your `:root` block. URL-encoding keeps the value short enough to stay readable in DevTools, which matters when you're scanning a `:root` with a dozen icon variables.

Compare URL-encoding vs base64 before committing

You inherited a stylesheet where someone base64'd every inline SVG and the CSS file is heavier than it needs to be. Paste each SVG here, read the size diff — it shows base64 bytes vs URL-encoded bytes side by side. For the typical icon you'll see URL-encoding win by 20-40%. Swap the base64 blobs for the URL-encoded form, recompute your CSS bundle size, and you've trimmed real bytes off every page load with zero visual change.

Prototype a repeating SVG pattern as a background

You designed a tileable dot or wave pattern in Figma and exported a small SVG tile. To preview it as a CSS background you need it inline. Paste the tile, copy the CSS rule, add `background-repeat: repeat`, and you can iterate on the look in the browser without a build step. When the pattern is finalized, css-pattern-generator can give you pure-CSS alternatives that skip the data URI entirely if you'd rather not inline.

SVG to Data URI — URL-encoded & base64, CSS / HTML / bare

Inline any SVG as a data URI — URL-encoded (smaller) or base64 — with ready-to-paste CSS, HTML and bare-URI output, side-by-side size diff, 100% in-browser.

Runs locally
Category Developer & DevOps
Best for Formatting, validating, shrinking, or inspecting code-adjacent text.

Paste your SVG here

Single .svg, up to 1 MB. Nothing leaves your tab.

Optimize before encoding (strip comments + whitespace)

Encoding

Output as

Output

Privacy. Both encoders run in your browser as plain JavaScript — no upload, no analytics. Open DevTools Network: request count stays at zero.

What this tool does

Turn SVG source into an inline data URI you can paste straight into CSS `background-image`, an HTML `<img src>`, or anywhere a URL is accepted — no extra HTTP request, no external file. Paste your markup or drop a `.svg` file and the tool produces both encodings at once: URL-encoded (the recommended one — it only escapes the handful of characters that break inside `url(...)`, so the result is smaller and stays human-readable) and classic base64. A live byte-for-byte size comparison shows you which encoding wins for your specific SVG; for most icons and logos URL-encoding is 20-40% smaller than base64 because it leaves the angle brackets, letters and digits untouched instead of inflating every 3 bytes into 4. Optional lightweight cleanup strips comments and collapses redundant whitespace before encoding, without touching paths or attributes. Copy any of three output flavours with one click: a full CSS rule, an `<img>` tag, or the raw data URI. Everything runs locally in your tab — the SVG never leaves the device, and the encoders are plain JavaScript you can audit in DevTools.

Tool details

Input: Files + Text; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Preview; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 10 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Developer & DevOps · Developer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How SVG to Data URI / CSS Background fits into your work

Use it in the small gaps between coding, reviewing, debugging, and shipping.

Developer jobs

Formatting, validating, shrinking, or inspecting code-adjacent text.
Preparing snippets for documentation, tickets, commits, or handoff.
Checking a small payload quickly without switching tools.

Developer checks

Run irreversible transforms like minify or obfuscate on a copy.
Keep secrets out of pasted snippets unless the tool explicitly stays local.
Use your normal tests or linter before shipping transformed code.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Inline a CSS background icon without an extra request
You have a small chevron or search icon used in one component and you don't want a separate `.svg` file (and its HTTP round-trip) just for it. Paste the SVG here, leave URL-encoding selected, and copy the CSS output — `background-image: url("data:image/svg+xml,...")`. Drop it straight into your component's stylesheet. The icon ships inside the CSS, renders on first paint with no flash of missing image, and your network panel shows one fewer request. For a sprite of many icons this adds up fast.
Embed a logo in an HTML email
Email clients block external images by default and many strip `<style>` blocks, so the reliable way to show a small vector logo is an inline data URI on an `<img>` tag. Paste the logo SVG, switch the output to the HTML `<img>` flavour, and copy. Note many older email clients (Outlook desktop) don't render SVG at all — for those, rasterize with svg-to-png-converter first and inline the PNG via base64-image-converter. Use this tool when your audience is on modern webmail (Gmail, Apple Mail) where SVG is supported.
Ship a Tailwind / CSS custom property full of vector art
You want a reusable `--icon-check: url(...)` custom property so any element can pull in the same SVG via `background-image: var(--icon-check)`. Paste the icon, copy the bare data URI output, and assign it to the variable in your `:root` block. URL-encoding keeps the value short enough to stay readable in DevTools, which matters when you're scanning a `:root` with a dozen icon variables.
Compare URL-encoding vs base64 before committing
You inherited a stylesheet where someone base64'd every inline SVG and the CSS file is heavier than it needs to be. Paste each SVG here, read the size diff — it shows base64 bytes vs URL-encoded bytes side by side. For the typical icon you'll see URL-encoding win by 20-40%. Swap the base64 blobs for the URL-encoded form, recompute your CSS bundle size, and you've trimmed real bytes off every page load with zero visual change.
Prototype a repeating SVG pattern as a background
You designed a tileable dot or wave pattern in Figma and exported a small SVG tile. To preview it as a CSS background you need it inline. Paste the tile, copy the CSS rule, add `background-repeat: repeat`, and you can iterate on the look in the browser without a build step. When the pattern is finalized, css-pattern-generator can give you pure-CSS alternatives that skip the data URI entirely if you'd rather not inline.

Common pitfalls

Leaving `#` unescaped in a hand-written data URI. A `fill="#f00"` with a raw `#` truncates the SVG at the hash because the browser reads everything after `#` as a URL fragment. This tool escapes it to `%23` automatically — but if you copy a data URI from elsewhere and it renders blank, an unescaped `#` is the first thing to check.
Base64-encoding everything by reflex. Base64 adds a flat ~33% and makes the output unreadable. For SVG (which is already text) URL-encoding is almost always smaller and you can still eyeball it in DevTools. Only reach for base64 when a consumer specifically can't handle a URL-encoded payload.
Inlining a large illustration. Data URIs can't be cached separately from the file that holds them, so a 50 KB inlined SVG re-downloads with every page that references it. Keep inlining to small icons and logos; link big assets as external files.
Forgetting that `<img src="data:image/svg+xml,...">` needs the SVG to carry its own `xmlns`. Unlike inline `<svg>` in HTML, an SVG loaded via `<img>` or CSS `url()` is parsed as a standalone document and must declare `xmlns="http://www.w3.org/2000/svg"` or it won't render.

Privacy

The SVG you paste or drop is encoded entirely in your browser tab — the URL-encoder and the base64 encoder are plain JavaScript, no network call, no upload, no logging of what you converted. Open the DevTools Network panel and the request count stays at zero. One privacy caveat: this tool mirrors your SVG source into the shareable URL query string so a "share link" reproduces the same input. SVG markup is usually large, so the URL state is capped — oversize input simply isn't written to the URL. Still, if your SVG embeds anything you wouldn't put in a screenshot (a private API key in a comment, an unreleased brand mark), copy the output manually instead of sharing the URL.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

SVG to Data URI — URL-encoded & base64, CSS / HTML / bare

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How SVG to Data URI / CSS Background fits into your work

Developer jobs

Developer checks

Good next steps

Real-world use cases

Inline a CSS background icon without an extra request

Embed a logo in an HTML email

Ship a Tailwind / CSS custom property full of vector art

Compare URL-encoding vs base64 before committing

Prototype a repeating SVG pattern as a background

Common pitfalls

Privacy

FAQ

SVG Optimizer

SVG to PNG Converter

Base64 Image Converter

CSS Pattern Generator

Image Format Converter

AI Eval Planner

Apache Cheatsheet

API Key Generator

API Rate Limit Cheatsheet

ASCII Table Generator

ASCII Table Reference

awk + sed Cheatsheet