logoredraws.com

Create a data URI from an SVG logo

How to turn an SVG logo into a data URI: choosing URL-encoding or base64, preparing paths, text and colors, escaping the markup and checking the result.

Published

Contents
  1. What converting to a data URI does and does not change
  2. URL-encoded versus base64
  3. Prepare the SVG before encoding
  4. Convert the logo step by step
  5. Characters that break URL-encoded SVG
  6. Final inspection
  7. When another approach fits better

A data URI places the contents of your SVG logo directly in the code, where a file address would normally go, such as an img src attribute or a CSS url() value. For an SVG, the string begins with the media type image/svg+xml and is followed by the logo's markup. That markup is either URL-encoded or base64-encoded. The browser decodes the string and renders the logo as if it had loaded a separate file. This only works if the SVG is self-contained, meaning it does not depend on external fonts, linked images or stylesheets.

What converting to a data URI does and does not change

Encoding changes how the logo is delivered. It does not change the artwork. If the SVG is built from real vector paths, those paths stay vector and scale cleanly. If the SVG is a wrapper around an embedded bitmap, the data URI carries that bitmap unchanged, and it will not get any sharper. A typical case is an image element holding base64 PNG or JPEG data. You cannot tell which kind of file you have from the .svg extension. Open the file in a text editor and look at what it contains: path, circle, polygon and similar shape elements indicate vector artwork, while an image element with a long encoded string indicates embedded raster content.

Converting a file also has no effect on the rights attached to it. Being allowed to download a brand's logo is not the same as being allowed to modify it, outline its typeface or use the trademark in a given context. Check the brand's usage terms and the font license before you edit or redistribute the artwork.

URL-encoded versus base64

Method | Prefix | How the markup is stored | Practical trade-offs
URL-encoded | data:image/svg+xml, | The SVG text stays readable, with only problem characters escaped | Usually closer to the original file size and easy to inspect, but you must escape characters correctly or the image fails to render
Base64 | data:image/svg+xml;base64, | The whole file is converted to a base64 string | Simple to generate and free of escaping problems, but larger and unreadable without decoding

Base64 represents every three bytes as four characters, so the encoded string is roughly one-third larger than the source before any server compression. URL-encoding only expands the characters that need escaping, so how much it grows depends on the file. No measured comparisons for specific logos were supplied for this article. If size matters, compare your own files.

Prepare the SVG before encoding

  • Start from the master vector file, not a raster preview or a file traced from a screenshot.
  • Convert live text to outlines, or confirm the logo contains no text elements. An SVG loaded as an image cannot fetch external or web fonts, so live text falls back to whatever font the system substitutes. Outlining a licensed typeface may also be restricted by the font license.
  • Remove or replace any linked raster images. External references will not load from an SVG used as an image, and embedded bitmaps lose vector scalability.
  • Remove editor metadata, comments, hidden layers, unused definitions and empty groups. This shortens the string and cuts down on characters that need escaping.
  • Keep the viewBox attribute so the logo scales correctly, and keep the standard SVG namespace declaration (the xmlns attribute). Without it, an SVG served as an image may not render.
  • Set colors explicitly on the shapes. An SVG used through img or a CSS background does not inherit color from the page, so currentColor and page-level CSS variables will not work as they do with inline SVG.

Convert the logo step by step

  • 1. Save the cleaned SVG and open it in a text editor to confirm it contains vector shapes and no external references.
  • 2. Collapse the markup to a single line by removing line breaks and unnecessary whitespace between tags.
  • 3. Choose an encoding. For URL-encoding, switch attribute quotes inside the SVG to single quotes, then escape the characters listed in the next section. For base64, encode the whole file with a command-line tool or a script.
  • 4. Add the correct prefix: data:image/svg+xml, for URL-encoded text, or data:image/svg+xml;base64, for base64.
  • 5. Paste the result into a CSS url() value wrapped in double quotes, or into an HTML img src attribute.
  • 6. Test the result using the checks in the final section.
.logo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='…' viewBox='0 0 120 40'%3E%3Cpath fill='%23112233' d='…'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

In the CSS example above, the namespace value and path data are shortened with ellipses. When you build your own string, keep the full values from your source file. Note that the hex color's # is written as %23.

# GNU/Linux: encode without line wrapping
base64 -w 0 logo.svg > logo-base64.txt

# macOS
base64 -i logo.svg -o logo-base64.txt

# Then prepend the prefix to the output:
# data:image/svg+xml;base64,<encoded text>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="Company name logo" width="120" height="40">

Characters that break URL-encoded SVG

  • # must become %23. Otherwise everything after it, including hex colors and internal references like url(#gradient), is read as a URL fragment and dropped.
  • % must become %25 so it is not mistaken for the start of an escape sequence.
  • < and > should become %3C and %3E. Some browsers tolerate them unescaped, but escaping is the safer choice.
  • Double quotes inside the SVG will close a double-quoted CSS url() or HTML attribute early. Use single quotes inside the SVG, or escape the double quotes as %22.
  • Non-ASCII characters, such as symbols left in metadata or titles, should be percent-encoded or removed.
  • General-purpose functions such as JavaScript's encodeURIComponent escape more characters than strictly necessary. The output is longer but still valid.

Final inspection

  • View the logo at very small and very large sizes and confirm the edges stay sharp. Soft or pixelated edges point to embedded raster content.
  • Compare it against the source file for missing shapes, wrong colors or substituted fonts.
  • Check it on light and dark backgrounds, and confirm transparent areas are still transparent.
  • If the page uses a Content Security Policy, confirm that data: is allowed for images. If it is not, the logo will be blocked without any visible error.
  • Give img elements meaningful alt text. A CSS background image has no alt text, so use it only for decorative placements or pair it with an accessible label.
  • If the logo is going into email, test it in the actual target clients, because SVG and data URI support there is inconsistent.

When another approach fits better

Data URIs suit small, simple logos that should arrive with the stylesheet or page instead of as a separate request. They are a poor fit when the logo is large or complex, when it appears on many pages and would benefit from being cached as its own file, or when it needs CSS styling or hover color changes. For the first two cases, serve a separate SVG file. When the logo needs to respond to page styles, inline SVG markup is the usual choice.

Evidence gaps: no logo-specific file sizes, tool comparisons or browser test results were supplied for this article. The guidance here describes the standard data URI and SVG behavior only. Confirm results in your own build tools and target browsers.