⌘ K
svg · data uri · base64 · url-encoded

Encode SVG as a data URI

Get both URL-encoded and base64 data URIs for any SVG with byte counts side by side. Ready-to-paste snippets for img, CSS, and React.

SVG to Data URI
Source
181 B
svg
URL-encoded
223 B
smaller
Base64
26 B
padded
Status
ready
live
URL-encoded is usually 20-30% smaller than base64 for SVG.
input · svg source
output · data URIs
URL-encoded (223 B)
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%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E
Base64 (26 B)
data:image/svg+xml;base64,
Quick Start

How to inline SVG

Data URIs let you embed SVG inside HTML, CSS, or JS without a separate file request. URL-encoded is almost always smaller than base64 for SVG.

  1. 01

    Paste or upload

    Drop in raw SVG markup or an entire 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
  2. 02

    Compare encodings

    URL-encoded vs base64 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
  3. 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
  4. 04

    Copy the URI

    Drop into img, CSS background, or React.

    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&rsquo;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&rsquo;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.

Related toolsSVG to CSS BgSVG MinifierSVG OptimizerSVG to Base64SVG ViewerSVG to Vue
Use Cases

When to inline SVG

Single-request assets, CSS icons, build-free embeds.

CSS icons

Embed icons as background-image — no extra request. 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

Inline images for email clients that allow them. 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

Print stylesheets

Self-contained CSS that travels everywhere. 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 bundles

Ship icons inside JS without import paths. 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 output without saving to disk. 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 icons. 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

URL-encoded SVGs are usually 20-30% smaller and don't add the base64 padding overhead.
If your SVG contains many bytes that already need escaping anyway, or if your tooling chokes on raw data URI characters.
Yes — both forms work directly in src attributes and CSS-in-JS style objects.
URL-encoded data URIs are wrapped in double-quoted url() so inner quotes must be single — saves bytes vs escaping.
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.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!