What is an SVG data URL?

A data URL encodes file content directly into a URL string, prefixed with data:image/svg+xml;. This lets you embed SVG images inline in CSS background-image properties or HTML img src attributes without an external file request.

Should I use base64 or URL-encoded data URLs for SVG?

URL-encoded (data:image/svg+xml,[encoded]) is generally preferred for SVG. It is typically 10–15% smaller than base64 because SVG is already text and base64 adds ~33% overhead. Both work in all modern browsers.

When should I use SVG data URLs instead of external SVG files?

Data URLs are useful for small icons in CSS that would otherwise require an HTTP request. For large SVGs or icons reused many times, external files with HTTP caching are more efficient. The threshold is typically around 1–2 KB.

How does the PNG conversion work?

The tool renders the SVG into an HTML canvas element at the selected size, then reads the canvas pixel data as a PNG using the toDataURL API. This all happens in your browser with no server involved.

Why does my PNG look different from the SVG preview?

Rasterization converts vector paths to pixels. At small sizes (32px), thin details may lose sharpness. At large sizes (512px) the quality is typically excellent. If you use text elements in the SVG, those are also rasterized.

Can I use the data URL as a CSS background?

Yes. The tool generates a ready-made CSS snippet: background-image: url("data:image/svg+xml;base64,..."). Paste it directly into your stylesheet.

What is the maximum SVG size this handles?

There is no hard limit. The tool works on any SVG that your browser can parse. Very large or complex SVGs with thousands of paths may take a moment to process.

Is my SVG data sent to a server?

No. All encoding and rendering happens entirely in your browser. No data leaves your machine.

Can I use data URLs in Next.js or React?

Yes. Copy the base64 data URL and use it as the src of an img tag or in a CSS-in-JS style object. For CSS modules or Tailwind, use it in an inline style attribute or a CSS custom property.

Gradient Maker Box Shadow Color Palette Grid Generator PX → REM SVG to JSX SVG Optimizer SVG to Data URL

SVG to Data URL

Convert SVG to base64 data URL, URL-encoded inline, or rasterized PNG data URL. Copy any variant.

SVG Input

drop .svg file

Preview

PNG size

PNG

SVG (vector) · left

PNG 256×256 · right

Base64 Data URL

294 B

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDUiIGZpbGw9IiM2Mz…

URL-Encoded Data URL (smaller, recommended)

234 B

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E %3Ccircle cx='50' cy='50' r='45' fill='%236366f1'/%3E %3Cpath d='M35 50 L50 35 L65 50 L50…

CSS background-image

320 B

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCI…

<img> tag

319 B

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDUiIGZp…

When and why to embed SVGs as data URLs

Every external asset a page loads requires a network round-trip. For small SVG icons used once in CSS: a checkmark, a loading spinner, a custom bullet: converting them to a data URL eliminates that request entirely. The icon is embedded directly into your stylesheet, and with HTTP/2 the marginal cost is often worth the savings in connection overhead.

The two encoding choices matter. Base64 is the familiar option and is universally supported, but the algorithm inflates binary data by approximately 33%. Since SVG is plain text, the URL-encoding approach (replacing special characters with % sequences) avoids that inflation and produces a smaller string. For CSS backgrounds especially, URL-encoded SVG data URLs are the recommended practice from the CSS Tricks data URI guide.

How to convert SVG to data URL: step by step

1
Paste your SVG or drop a file
Paste raw SVG markup into the input area, or drag and drop an .svg file onto the text area. A live preview renders immediately.
2
Check the base64 data URL
The first output block shows a data:image/svg+xml;base64,... URL. This format works everywhere but is roughly 33% larger than the original SVG due to base64 encoding overhead.
3
Use URL-encoded for smaller output
The second block shows a URL-encoded data URL (data:image/svg+xml,[encoded]). This is typically 10–15% smaller than base64 and is the recommended format for CSS backgrounds.
4
Choose a PNG size and rasterize
Select a PNG export size (32, 64, 128, 256, or 512 px) and the tool renders the SVG to a canvas and generates a PNG data URL: useful for fallback images or favicon exports.
5
Copy the CSS or img tag snippets
Scroll down to find ready-made CSS background-image and HTML img tag snippets with the base64 URL already embedded. Click Copy on any output block to grab it.

Related Tools

⊞

CSS Grid Generator

Configure grid-template-columns, rows, gaps, and alignment visually. Copy ready-to-use CSS.

🔢

PX → REM Converter

Convert px to rem/em and back. Set custom base font size. Batch convert and view standard scale.

⚛️

SVG to JSX

Paste SVG markup and get React-ready JSX: camelCase attrs, className, style objects, TypeScript props.

✂️

SVG Optimizer

Strip comments, metadata, editor namespaces, and redundant attributes. See before/after size reduction.

Frequently Asked Questions

What is an SVG data URL?: A data URL encodes file content directly into a URL string, prefixed with data:image/svg+xml;. This lets you embed SVG images inline in CSS background-image properties or HTML img src attributes without an external file request.
Should I use base64 or URL-encoded data URLs for SVG?: URL-encoded (data:image/svg+xml,[encoded]) is generally preferred for SVG. It is typically 10–15% smaller than base64 because SVG is already text and base64 adds ~33% overhead. Both work in all modern browsers.
When should I use SVG data URLs instead of external SVG files?: Data URLs are useful for small icons in CSS that would otherwise require an HTTP request. For large SVGs or icons reused many times, external files with HTTP caching are more efficient. The threshold is typically around 1–2 KB.
How does the PNG conversion work?: The tool renders the SVG into an HTML canvas element at the selected size, then reads the canvas pixel data as a PNG using the toDataURL API. This all happens in your browser with no server involved.
Why does my PNG look different from the SVG preview?: Rasterization converts vector paths to pixels. At small sizes (32px), thin details may lose sharpness. At large sizes (512px) the quality is typically excellent. If you use text elements in the SVG, those are also rasterized.
Can I use the data URL as a CSS background?: Yes. The tool generates a ready-made CSS snippet: background-image: url("data:image/svg+xml;base64,..."). Paste it directly into your stylesheet.
What is the maximum SVG size this handles?: There is no hard limit. The tool works on any SVG that your browser can parse. Very large or complex SVGs with thousands of paths may take a moment to process.
Is my SVG data sent to a server?: No. All encoding and rendering happens entirely in your browser. No data leaves your machine.
Can I use data URLs in Next.js or React?: Yes. Copy the base64 data URL and use it as the src of an img tag or in a CSS-in-JS style object. For CSS modules or Tailwind, use it in an inline style attribute or a CSS custom property.

AlteredIdea vs alternatives

vs other online tools: Everything runs in your browser: private, instant, no account needed.

vs desktop apps: No install required. Works on any device.

vs paid tools: Completely free, unlimited use.

Share:Share on X Share on LinkedIn