logoredraws.com

How to Encode an SVG Logo in Base64

Convert an SVG logo to a Base64 data URI step by step, prepare the artwork first, and confirm the encoded logo still renders correctly.

Published

Contents
  1. What the terms mean
  2. Step 1: Prepare the SVG artwork before encoding
  3. Step 2: Encode the file
  4. Step 3: Build the data URI and use it
  5. Step 4: Verify the result
  6. Trade-offs to weigh

To encode an SVG logo in Base64, read the SVG file as bytes, convert those bytes to a Base64 string, and add the prefix data:image/svg+xml;base64, in front of it. You can then use the result anywhere a data URI is accepted, such as an HTML image source or a CSS background. The logo is still vector artwork after encoding. Base64 changes how the file is packaged as text. It does not change the paths inside it.

What the terms mean

SVG (Scalable Vector Graphics) is a text-based format. It describes a logo as paths, shapes and fills instead of a grid of pixels, so it scales without losing sharpness. Base64 is a way of writing any binary or text data using a limited set of 64 safe characters. A data URI uses that encoded data to embed a file inside a document or stylesheet, so no separate file has to be requested.

Step 1: Prepare the SVG artwork before encoding

Base64 reproduces whatever is in the file, including its problems. Clean up the logo first so the embedded version behaves predictably.

  • Convert live text to outlines (paths) so the logo does not depend on a font that may be missing when it renders.
  • Remove references to external files such as linked raster images or web fonts. An SVG loaded as an image usually cannot fetch outside resources.
  • Confirm the root svg element has a viewBox attribute so the logo scales correctly at any display size.
  • Strip editor metadata, hidden layers and unused definitions to reduce the string length.
  • Check that the file contains vector paths and not only an embedded bitmap. A .svg extension alone does not prove the content is vector.

Step 2: Encode the file

Use one of the following methods, depending on your system. Each one outputs the Base64 string only. You add the data URI prefix yourself in Step 3.

Environment | Command
Linux | base64 -w 0 logo.svg > logo.b64
macOS | base64 -i logo.svg -o logo.b64
Windows PowerShell | [Convert]::ToBase64String([IO.File]::ReadAllBytes("logo.svg")) | Out-File logo.b64 -NoNewline
Node.js | require('fs').readFileSync('logo.svg').toString('base64')

On Linux, the -w 0 option stops the output from wrapping onto new lines. A line break inside a data URI can break it. If you encode in a browser with btoa(), it fails on characters outside the Latin-1 range. Such characters can appear in titles or text inside an SVG. Reading the file as bytes, as the commands above do, avoids that problem.

Step 3: Build the data URI and use it

Join the prefix and the encoded string with no spaces between them. Then place the result where you need the logo.

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..." alt="Company logo" width="160" height="40">

.logo {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
  background-size: contain;
  background-repeat: no-repeat;
}

The string in the example is shortened. Your real string will be much longer. A Base64 string for an SVG file usually starts with PHN2Zy, which is the encoded form of the opening of an svg tag. A file that begins with an XML declaration will start with PD94bWwg instead.

Step 4: Verify the result

  • Decode the string and compare it with the original. On Linux: base64 -d logo.b64 > check.svg && cmp logo.svg check.svg. No output from cmp means the files are identical.
  • Paste the full data URI into a test HTML page and confirm the logo appears.
  • Resize the image in the test page and check that edges stay sharp. Blurring suggests the SVG contains an embedded bitmap.
  • Compare letterforms with the approved artwork. A different-looking font means text was not converted to outlines.
  • Check that the string contains no line breaks or stray spaces.

Trade-offs to weigh

Base64 output is about one third larger than the original data, because every 3 bytes become 4 characters. A browser cannot cache an embedded logo separately from the page or stylesheet that contains it. Embedding therefore suits small logos that are used once or that must work without an extra file request. A logo that is reused across many pages is usually better served as a separate SVG file. Because SVG is already text, percent-encoding it with the data:image/svg+xml prefix and no base64 marker is another option, and it often produces a shorter string. The supplied material did not include file-size or performance measurements for any specific logo, so test with your own artwork.

Encoding a logo does not affect who may use it. Permission to reuse the mark depends on the owner's terms, not on the file format or how the file is packaged.