Base64 or URL-encoded — which should I use?

URL-encoded data URIs are typically 20–30% smaller for SVG than base64. Use base64 only when characters like # or % cause issues in your toolchain.

Will this work as a CSS background?

Yes — the CSS snippet uses url("...") with the URL-encoded form, which all modern browsers accept.

svg · base64 · data uri · css · local

Encode SVG to Base64 & data URIs

Paste SVG markup and get raw base64, base64 data URI, URL-encoded data URI, and a CSS background-image snippet. Runs locally.

SVG to Base64

Source

144 B

svg

Base64

192 B

padded

URL-encoded

269 B

smaller

Status

ready

live

input · svg source

output · encodings

Raw base64 (192 B)

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIGZpbGw9IiMzYjgyZjYiLz4KPC9zdmc+

Data URI (base64) (218 B)

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIGZpbGw9IiMzYjgyZjYiLz4KPC9zdmc+

URL-encoded data URI (269 B)

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20fill%3D%22%233b82f6%22%2F%3E%0A%3C%2Fsvg%3E

CSS background-image (295 B)

background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20fill%3D%22%233b82f6%22%2F%3E%0A%3C%2Fsvg%3E");

Quick Start

How to encode SVG to base64

Inline SVG as base64 to skip extra HTTP requests. URL-encoded is usually smaller for SVG content.

01
Paste SVG
Drop in raw SVG markup of any size.
Files stay in memory as an HTMLImageElement — the original bytes are never uploaded, and EXIF metadata is preserved until you explicitly transform it.
inputuploadcanvaslocaldecode
input · bytessvg · loaded
```
<svg>...</svg>
```
loaded · decodedcanvas · ready
02
Compare encodings
Base64 vs URL-encoded with byte sizes.
Encoder quality is exposed where the format supports it — JPEG and WebP get a 0–1 quality slider; PNG is lossless. Options re-render the canvas immediately.
compareoptionslive previewencoderquality
encodings · tunable4 · live
```
base64 · url · css
```
options applied · liveencoder · live
03
Pick smaller
URL-encoded usually wins by 20-30%.
Pixel work runs on the Canvas 2D context — drawImage resamples with the browser’s bilinear filter and getImageData/putImageData back per-pixel passes.
chooserenderCanvas 2Dpreviewpx-perfect
winner · resampledurl-enc · px-perfect
```
smaller
```
preview · livepx-perfect
04
Copy snippet
Paste into HTML, CSS, JSX or wherever you need.
Downloads ship via a hidden anchor with an object URL — no server round-trip, and the file on disk is untouched. The output filename inherits a sensible suffix.
exportdownloadblobclient-sideobject URL
ok · blobready · saved
```
shipped
```
shipped · ready to shipsuccess

Pro tips

Browser-only image work that scales

Convert with quality control

JPEG/WebP let you pick a 0–1 quality. Default 0.92 is a good compromise of size and visible quality.

PNG isn’t free

Use PNG only for transparency or sharp edges. For photos, WebP is smaller at the same perceived quality.

Strip EXIF for privacy

Photo EXIF often contains GPS, camera model, and timestamps. Strip before sharing public uploads.

Watch the colour profile

Convert to sRGB before web export. Wide-gamut images render oversaturated in non-managed browsers.

AVIF when it’s available

AVIF beats WebP on size at the same quality. Detect support via <picture> with fallbacks.

Lazy-load below the fold

Add loading="lazy" on <img>. The browser handles scheduling — no IntersectionObserver needed.

Use Cases

When to inline SVG as base64

CSS icons, single-request assets, email-safe images.

CSS background icons

Embed icons as background-image without extra requests. Decoded into a Canvas 2D context — original bytes never leave the tab, so you can process customer-uploaded photos, internal screenshots, or sensitive diagrams without privacy concerns.

px-perfect

Email signatures

Inline images survive most email clients. Encoders expose quality 0–1 where the format supports it (JPEG, WebP); PNG and AVIF stay perceptually lossless. Pick 0.85 for web, 0.95 for archival, 0.7 for thumbnails.

quality-tunable

Self-contained widgets

Ship a stylesheet that carries all its icons. Pair with the EXIF Stripper before sharing user-uploaded photos publicly. Camera serial numbers, GPS coordinates, and timestamps often hide in image metadata and leak more than the picture itself.

format-aware

JS bundle assets

Inline SVG inside JS without an import path. Output preserves colour profile (sRGB) so it renders consistently across browsers, monitors, and print pipelines. Wide-gamut workflows can opt into Display P3 for modern Apple devices.

EXIF-safe

Quick previews

Test SVG snippets without saving files. Re-runs only on option changes, never on window resize, so the canvas stays responsive on large images. drawImage uses the browser's bilinear filter for fast resampling.

client-side

Offline pages

Critical icons that never need a network call. Downloads as .png, .jpg, .webp, or .avif with the correct MIME so editors apply native handling on save. The filename inherits a sensible suffix derived from the input.

compression-ready

FAQ

Frequently asked questions

Base64 or URL-encoded?

URL-encoded SVGs are typically 20-30% smaller than base64. Use base64 if your tooling chokes on # or % characters.

Does it work in CSS?

Yes — the CSS snippet uses url("...") with the URL-encoded form, accepted by all modern browsers.

Can I use this in React?

Yes, drop the data URI in any src or style attribute.

Why are quotes swapped in URL-encoded?

The data URI is wrapped in double-quoted url() so inner quotes must be single — saves bytes vs escaping.

Is anything sent to a server?

No. Encoding runs entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!