iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To encode an SVG file as Base64, run base64 < icon.svg, remove any line breaks the destination cannot accept, and prepend data:image/svg+xml;base64,. Base64 is optional for SVG: because SVG is text, many CSS and URL contexts can use percent-encoded SVG markup instead. Choose the format the destination accepts, and compare the complete output if size matters.
What an SVG Base64 data URL contains
A Base64 data URL combines a media type, an encoding marker, a comma, and the encoded payload. The general form is data:[<media-type>][;base64],<data>. For SVG, use image/svg+xml; ;base64 tells the consumer to decode the following payload as Base64. The comma separates the metadata from the data.
For example, data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg== is a complete data URL containing a minimal SVG document. The Base64 string alone is only the payload, not a complete data URL. MDN’s data URL reference explains the format and its components.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallEncode an SVG file from the command line
- Open a terminal in the directory containing the SVG file, or provide its full path.
- Run
base64 < icon.svg. Input redirection encodes the file’s existing bytes without adding a newline, unlike a command that prints text before piping it into Base64. - If the output wraps across lines, remove those line breaks if the field receiving the URL requires one uninterrupted value.
- Place
data:image/svg+xml;base64,immediately before the encoded output. Keep the comma and the payload together when pasting the result.
The base64 utility is available on common GNU/Linux and macOS systems, though options and line-wrapping behavior can vary by platform. MDN shows the basic shell pattern in its Base64 reference.
#1 Best Overall
Encode SVG in JavaScript when the bytes matter
JavaScript’s btoa() can encode a binary string, but it is not a general-purpose conversion from arbitrary Unicode text to Base64. SVG files containing non-ASCII characters should first be converted to the intended UTF-8 bytes, then those bytes encoded. Otherwise, direct use of btoa() may fail or produce an incorrect result for characters outside its byte range. Use the current documentation for the target browser or runtime when choosing a byte-conversion method; MDN’s Base64 reference describes the relevant encoding distinction.
When percent-encoded SVG is a better fit
Because SVG is textual markup, you can put its text after data:image/svg+xml, and percent-encode characters that need escaping in the URL context. For example, data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E represents a minimal SVG without Base64. Spaces, newlines, reserved characters, and non-printing characters need appropriate handling. Percent-encoding the entire markup is valid, but selectively escaping only what needs it can be shorter.
In CSS, the enclosing syntax matters too: quotes, parentheses, and other characters may need attention in addition to URL encoding. MDN’s CSS image guide demonstrates SVG data URLs and selective escaping, including encoding a color’s # as %23. This text form is usually easier to inspect and edit than an opaque Base64 payload.
Choose between Base64, escaped text, and a separate file
| Option | Readability and editing | Size and reuse | Good fit |
|---|---|---|---|
| Base64 data URL | Payload is difficult to inspect or edit directly. | Base64 can expand textual SVG; the full URL size depends on the payload and any compression or transport. Repeated inline copies repeat the data. | The destination specifically expects Base64, or you need a textual representation of arbitrary bytes. |
| Percent-encoded SVG data URL | Markup remains more recognizable and can be edited, though escaped characters take care. | May be shorter than Base64 for a particular SVG; compare complete URLs rather than assuming a fixed size. | Short SVG markup in CSS or another URL context that accepts a non-Base64 data URL. |
Separate .svg file |
Usually easiest to maintain as a standalone asset. | Can be reused by reference rather than duplicated in each document or stylesheet. Suitability depends on how the asset is served and cached. | A larger or reused graphic, or one with linked assets that are simpler to manage externally. |
There is no universal size-increase percentage for Base64 SVG. Padding, the SVG’s contents, and compression or transport affect the comparison. Measure the complete URL or document for the asset and destination you actually use. RFC 2397 describes data URLs as useful for short values; its historical SGML and HTML attribute examples are not current browser length limits. Applications may impose their own limits, and no single current browser cap applies universally. See RFC 2397.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Check how the destination will render the SVG
A data URL is convenient for a small self-contained graphic, but embedding the markup does not make every SVG feature work in every context. SVG loaded as an image, such as through an HTML <img> or a CSS background, may have scripts disabled and external resources unavailable. That behavior differs from treating SVG as a document with elements such as <iframe>, <object>, or <embed>. Consult MDN’s SVG-as-image guide for context-specific restrictions.
CSS resource fetching can also encounter cross-origin restrictions depending on the property and resource context. Although a data URL embeds its own payload, references from inside that SVG to other resources still need scrutiny. Data URLs have no relative URL form, so relative references inside an embedded SVG cannot be assumed to resolve as they would in a standalone file. The MDN CSS image guide covers CSS image URL behavior and relevant constraints.
Quick Recap
Quick decision checklist
- Use Base64 when the consuming field requires a Base64 data URL or when you need to represent arbitrary bytes as ASCII text.
- For ordinary SVG markup in CSS, try a percent-encoded text data URL if the target accepts it and readability or editability matters.
- Use a separate SVG file when the graphic is reused, substantial, or depends on linked assets that are easier to manage outside an inline URL.
- Check the target’s parsing and length constraints, and test external-resource behavior in the actual rendering context.
- Compare the complete encoded URL with the alternatives for your specific asset instead of assuming Base64 is smaller or faster.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
