svg · css · background · base64 · url-enc

Convert SVG to a CSS background snippet

Q: Which encoding should I use?

URL-encoded is almost always smaller for SVGs. Use base64 only if your SVG contains many bytes that need escaping anyway.

Get ready-to-paste background-image data URIs in both URL-encoded and base64 form, with byte counts side by side.

SVG to CSS Background

Source

144 B

svg

URL-encoded

208 B

smaller

Base64

52 B

padded

Status

ready

live

input · svg source

output · css snippets

URL-encoded (smaller) (208 B)

background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230070f3' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");

Base64 (52 B)

background-image: url("data:image/svg+xml;base64,");

Quick Start

How to inline SVG as a CSS background

Embedding SVG directly in CSS avoids a network roundtrip and works in legacy email clients.

01
Paste or upload
Drop in any SVG markup, or open a .svg file.
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
URL-encoded vs base64 — both with byte counts.
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 · tunable2 · live
```
url · base64
```
options applied · liveencoder · live
03
Pick the smaller
URL-encoded usually wins by 20-30% for SVG.
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
Paste into CSS
Drop the background-image rule into your stylesheet.
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
```
background.css
```
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 in CSS

Self-contained stylesheets, email signatures, design systems.

Self-contained CSS

Ship icons inside your stylesheet — no asset folder needed. 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

Embed graphics inside HTML emails that accept inline styles. 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

Design systems

Bake brand icons directly into a tokens file. 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

List bullets and chevrons

Tiny icons used as pseudo-element backgrounds. 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

Print stylesheets

Icons that travel with the printable view. 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

No network dependency for critical visuals. 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

Which encoding should I use?

URL-encoded is almost always smaller for SVG content. Use base64 only when characters like # cause issues in your toolchain.

Will browsers cache the data URI?

They cache the CSS file containing it — so any visit that downloads the stylesheet picks it up.

Can I use this with pseudo-elements?

Yes — copy the url() into a content or background-image on :before/:after.

Does it work in old browsers?

All modern browsers and IE 9+ support data: URIs in CSS.

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!