SVG to Base64

SVG to Base64 Converter

Encode an SVG vector graphic as Base64 and get a data:image/svg+xml;base64,... URI, an <img> tag, or a CSS background-image rule in one click. Your file is processed in the browser only.

What makes SVG different

SVG (Scalable Vector Graphics) became a W3C recommendation in 2001. Unlike PNG or JPEG it isn't a grid of pixels but an XML text document that describes shapes, paths, gradients, and text. It scales to any size without blurring, supports transparency and CSS/SMIL animation, and is usually tiny for icons and logos. All modern browsers render SVG natively; the only thing to remember is the xmlns attribute on the root element when the file is used as an image.

Base64 vs URL-encoded SVG

Since SVG is already text, it doesn't strictly need Base64. You can also embed it percent-encoded, for example url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...%3E"). For CSS this is often the better option:

• It is typically 15–30% shorter than the Base64 version.
• It stays human-readable, so you can tweak a fill color by hand.
• Repeated text compresses well with GZip or Brotli, while Base64 hides those patterns.

Use the URL Encode / Decode tool to percent-encode an SVG (escape at least <, >, #, and double quotes). Base64 is still the right call for HTML email, JSON APIs, Markdown, and any system that rejects special characters.

Example

A 300-byte icon produces a data URI that begins with data:image/svg+xml;base64,PHN2Zy — PHN2Zy is simply the Base64 of <svg. If the file starts with an XML declaration, you'll see PD94bWwg (<?xml ) instead.

Before you encode

Run the file through an optimizer like SVGO to remove editor metadata, comments, and unnecessary precision. Inkscape and Illustrator exports often shrink by half. Need a raster fallback? Convert it with PNG to Base64, and check any string with Base64 to Image.