SVG → Base64

SVG to Base64

Turn an SVG into a data URI you can paste straight into HTML or CSS — Base64 and the usually smaller URL-encoded form, side by side.

SVG → Base64

☞ funciona por completo en tu navegador — no se sube nada

Drop your SVG here

or click to browse — SVG only

Base64 data URI

Works anywhere a URL does. Always about a third larger than the raw file.

URL-encoded data URI

Same image, usually smaller than Base64 — and still readable, which helps when debugging CSS.

HTML img tag

CSS background

one less request

Why inline an SVG as a data URI

A data URI puts the image inside the HTML or CSS itself, so the browser never makes a second request for it. For small icons that is the difference between appearing instantly and appearing a moment late.

The trade-off is caching: an inlined icon is re-downloaded with every page that contains it, and it cannot be cached on its own. Inline the handful of icons that matter for the first paint, and leave the rest as files.

three steps

How to encode an SVG as Base64

Drop the SVG

Pick a .svg file — it stays on your device.

Pick a form

Copy the Base64 or the URL-encoded data URI.

Paste it in

Use the ready-made img tag or CSS background rule.

quick answers

SVG to Base64 FAQ

Base64 or URL-encoded — which should I use?

URL-encoded is usually smaller for SVG, because SVG is text and Base64 adds about 33% to anything it touches. URL-encoded is also readable, so you can spot the shape you meant in a stylesheet. Use Base64 when something in the pipeline mangles the raw characters.

Why is my data URI bigger than the file?

Base64 encodes three bytes as four characters, so a third of the growth is unavoidable. Run the file through the SVG optimizer first — editor metadata and over-precise coordinates often account for more than the encoding does.

Can I use this in a CSS background?

Yes — the CSS block is ready to paste. It uses the URL-encoded form inside double quotes, which is why the encoder swaps the SVG’s own double quotes for single ones.

The icon does not show up in my CSS

Almost always an unencoded `#`. A colour like `#fff` cuts the URL short at that point, and everything after it is treated as a fragment. The output here already escapes it — the problem usually appears when a data URI is hand-edited afterwards.

Is my file uploaded?

No. The encoding is plain string work done in your browser.

SVG to Base64

SVG → Base64

Drop your SVG here

Base64 data URI

URL-encoded data URI

HTML img tag

CSS background

Why inline an SVG as a data URI

How to encode an SVG as Base64

Drop the SVG

Pick a form

Paste it in

SVG to Base64 FAQ

Herramientas relacionadas

Conversor de imagen a icono

PNG a WebP

Conversor de imágenes

JPG a PNG

WebP a PNG

Imagen a Base64

GIF a fotogramas

Imágenes a GIF

Descodificador de códigos QR

Limpiador de códigos QR

Generador de códigos de barras

PNG a JPG

JPG a WebP

WebP a JPG

SVG a PNG

Código QR vCard

Generador de códigos QR

SVG to JPG

SVG to WebP

SVG to ICO

SVG to PDF

SVG to React

SVG to Vue

PNG to SVG

JPG to SVG

PDF to JPG

PDF to PNG

Image to PDF

JPG to PDF

PNG to PDF