SVG to Base64 Converter: Encode SVG Images Online

Convert SVG to Base64

SVG (Scalable Vector Graphics) is the only web image format that remains perfectly sharp at any zoom level. This tool encodes SVG files to Base64 for embedding as data URIs in CSS, HTML, or JavaScript.

How to Use

1. Drop an SVG file onto the upload area or click to browse
2. The tool reads the file and encodes it to Base64
3. Choose your output format: plain Base64, data URI, or CSS background
4. Copy the result

SVG and Base64: When It Makes Sense

SVG is unique among image formats because it is already text (XML). This creates a choice that does not exist with binary formats like PNG or JPEG: you can embed SVG as Base64, as URL encoded text, or as inline markup.

Base64 data URI

background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0...);

The SVG bytes are encoded to Base64, wrapped in a data URI. The browser decodes and renders the SVG.

URL encoded data URI (often better)

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...");

The SVG XML is percent encoded. This is typically smaller than Base64 for SVGs because SVG is already text and does not benefit from the binary to text step. The URL Encoder can help with the encoding.

Inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 22h20L12 2z"/>
</svg>

Direct markup in HTML. Most flexible: you can style it with CSS, animate it, and manipulate it with JavaScript. No encoding needed.

When to Use Base64 for SVG

Despite URL encoding often being smaller, Base64 SVG data URIs are the right choice when:

• The SVG goes into a context that does not support URL encoding (some email clients, certain templating engines)
• You need to store the SVG in a JSON payload where URL encoded characters would require additional escaping
• The SVG contains characters that are problematic in URL encoding (quotes, angle brackets in attribute values)
• You are generating CSS programmatically and want a consistent encoding approach for all image types

Optimizing SVGs Before Encoding

Design tools export bloated SVGs. Before Base64 encoding, run the SVG through an optimizer:

SVGO

npx svgo input.svg -o optimized.svg

SVGO removes editor metadata, merges paths, rounds coordinates, and strips unnecessary attributes. Typical savings: 30-60%.

Manual optimization checklist

• Remove XML declaration (<?xml ...?>). Browsers do not need it
• Remove <title>, <desc>, <metadata> if not needed for accessibility
• Use viewBox instead of width/height for scalability
• Simplify path data by reducing decimal precision
• Remove unused <defs> and gradients

SVG Base64 in Icon Systems

Modern icon systems often inline SVGs directly in HTML for styling flexibility. But for CSS only icon solutions (pseudo elements, list markers), Base64 data URIs work well:

.alert::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url(data:image/svg+xml;base64,PHN2Zy...);
  background-size: contain;
}

This approach keeps icons in CSS without touching HTML structure. Each icon is a separate data URI, typically 200-500 bytes of Base64 for simple path based icons.

File Size Comparison

For simple SVGs, the difference between Base64 and URL encoding is small. For complex SVGs, URL encoding wins consistently. Gzip compression narrows the gap further in HTTP delivery.

For raster image encoding, see PNG to Base64, JPG to Base64, or the general Image to Base64 converter.