CodesBeautify

SVG to Base64 Converter

Encode an SVG as a Base64 data URI, or as the shorter percent-encoded form that CSS prefers.

SVG file

Drop a file here, paste from the clipboard, or choose one

SVG, processed in this tab

Encoded
Runs locally in your browser

About the SVG to Base64 Converter

SVG is markup, not compressed pixel data, and that changes the calculation. Base64 was designed to make binary safe for text channels, but an SVG is already text, so encoding it costs a third of its length for no benefit. Percent-encoding only the handful of characters that a CSS url() cannot contain is usually shorter, and the browser skips a decoding step as well.

This converter offers both. The percent-encoded option produces a complete url("data:image/svg+xml,...") value with runs of whitespace collapsed, quotes swapped so the value nests cleanly, and the # characters in colour values escaped, which is the single most common reason a hand written SVG data URI silently fails. The Base64 options are there for the contexts that require them, such as an <img> source in an environment that mishandles raw markup.

The file is read locally, so an icon set that has not been published yet is safe to encode. If you select a file that is not actually SVG markup, the tool notices and falls back to Base64 rather than producing a broken url() value.

One caveat for either form: CSS cannot style an SVG delivered as a data URI, so a colour that needs to change with a theme belongs in an inline <svg> element instead. Preview an encoded icon with Base64 to Image.

How to use

  1. Choose or drop an .svg file on the panel.
  2. Select Percent-encoded CSS url() for the shortest stylesheet value, or a Base64 option where one is required.
  3. Paste the result into your stylesheet or template.

Common questions

Which encoding should I use in CSS?
The percent-encoded url(). It is shorter than Base64 for markup and needs no decoding step in the browser.
Why did my hand written SVG data URI break?
Almost always an unescaped # from a colour value, which the browser reads as a fragment. The percent-encoded option escapes it for you.
Can I recolour the icon with CSS afterwards?
No. An SVG in a data URI is an external image, so fill and stroke cannot be reached from the page stylesheet.
Are fonts and scripts inside the SVG preserved?
The markup is encoded as it stands, but scripts do not execute in an image context and external font references will not load.