Skip to content
ImgKiloImgKiloOpen tools

SVG to Base64

SVG to Base64

Drop an SVG and get its Base64 data URI, the raw Base64, and a ready CSS background rule. You also get a URL-encoded data URI, which is usually smaller than Base64 for SVG, so you can copy the shorter form. It runs in your browser, so the file is never uploaded.

  • Files never leave your device
  • Runs in your browser
  • Free, no signup

How it works

  1. 1

    Drop an SVG

    Add an .svg file. It is read as text in your browser, with no upload.

  2. 2

    Compare the two forms

    You get both the Base64 and the smaller URL-encoded data URI, so you can pick the shorter one.

  3. 3

    Copy and paste

    Grab the CSS background rule or the data URI and drop it straight into your stylesheet or markup.

What this SVG encoder gives you

Base64 and URL-encoded

Both forms are generated from your file, so you can copy the URL-encoded version that is usually smaller for SVG.

CSS background ready

A complete background-image rule is built for you, wrapped in url(), so an inline SVG icon is a single paste.

Encoded locally, never uploaded

The SVG is read in your browser and never sent anywhere, so private or client graphics stay on your device.

Where this helps

Frontend

Inline CSS icons

Set a small SVG icon as a CSS background to remove a network request.

Design

Repeating patterns

Use an SVG pattern as a tiled background-image without shipping a separate file.

Email

Email and single files

Embed an SVG directly in markup where external assets are unreliable.

Systems

Design tokens

Store a small icon as a data URI in a token or config value.

Tips that help

  • 1

    Prefer the URL-encoded form

    For SVG it is normally shorter than Base64, since SVG is text. Compare the two and copy the smaller one.

  • 2

    Inline small, link large

    A short icon is a great inline candidate. A huge, complex SVG is usually better as a cacheable file.

  • 3

    Use the CSS line

    The background-image rule is pre-wrapped in url(), so you can paste it into a selector as-is.

  • 4

    Re-encode after edits

    Changed the SVG source? Drop it in again for a fresh string.

Encoding an SVG for inline use: Base64 versus URL-encoding

An SVG is just text, which makes it a natural fit for inlining directly into CSS or HTML. But there are two ways to encode it, and for SVG they are not equal. This guide explains the difference between Base64 and URL-encoding for SVG, when inlining is worth it, and how to drop the result into a stylesheet.

Why URL-encoding usually wins for SVG

Base64 turns every three bytes into four characters, so it inflates any asset by roughly a third regardless of what it contains. That is the only sensible option for binary formats like PNG, which are not human-readable to begin with.

SVG to Base64

SVG is different, because it is already text. URL-encoding leaves most of the markup as-is and escapes only the few characters that would break a data URI or a CSS url(), such as angle brackets and the hash. The result is typically shorter than the Base64 version of the same file.

The tool produces both forms from your file and shows them side by side, so you can copy whichever is smaller. In most cases that is the URL-encoded data URI.

Dropping it into your code

For a CSS background, copy the ready-made background-image rule. It already wraps the data URI in url(), so you can paste it straight into a selector to use the SVG as an icon or a repeating pattern without a separate file.

For HTML, the img tag form points an image element at the data URI. This keeps the SVG self-contained in the markup, which is useful for email and single-file pages where external assets are unreliable.

If you maintain the SVG by hand, remember that re-encoding is quick: tweak the source, drop it in again, and copy the fresh string.

When to inline and when to link

Inlining shines for small, reused icons and backgrounds, where saving a request matters and the string stays short. A handful of inlined icons in your stylesheet is a common, sensible pattern.

Read more

For large or complex SVGs, a linked file is often better, because it can be cached on its own and does not bloat every page that uses your CSS. Judge it by the length of the encoded string: if it is enormous, keep it a file.

To go the other way, or to encode raster images instead, the image to Base64 tool handles PNG, JPG and the rest, and the Base64 to image tool decodes a string back to a file.

Frequently asked questions

Honest answers to what people ask before using this tool.

Further reading

Independent references if you want to go deeper on the formats and tradeoffs.

Related tools