To encode an SVG as Base64, convert the SVG file’s bytes to Base64 and prepend data:image/svg+xml;base64,. For example, use base64 < icon.svg in a shell, then place the output after that prefix. Base64 is optional for ordinary SVG markup: a percent-encoded text data URL or a separate .svg file may be easier to inspect, edit, or reuse.
What an SVG Base64 data URL contains
A data URL has this form: data:[<media-type>][;base64],<data>. The comma separates the metadata from the payload. For an SVG, the media type is image/svg+xml; the optional ;base64 indicates that the payload must be Base64-decoded. See the MDN data URL reference.
As an Amazon Associate I earn from qualifying purchases.
Here is a complete example: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==. Its payload encodes a minimal SVG document. It demonstrates the format, not a requirement to Base64-encode every SVG.
Raw Base64 by itself is only the encoded payload, not a complete data URL. To use it as one, include the MIME type, the ;base64 marker, and the comma.
#1 Best Overall
Encode an SVG file from the command line
- Open a terminal in the directory containing the SVG, 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 first prints text. - If the utility wraps its output across lines, remove those line breaks when the field receiving the URL requires a single uninterrupted payload.
- Prepend
data:image/svg+xml;base64,to the encoded output. The result is the data URL to paste into the destination.
MDN documents the base64 utility and the general data URL pattern in its data URL guide. Utility behavior and options can differ across platforms, so check the local command’s help if you need a particular output format.
Encode SVG text in JavaScript
For text in a browser or another JavaScript runtime, first convert the string to the intended UTF-8 bytes, then Base64-encode those bytes. btoa() expects a binary string; passing arbitrary Unicode text directly can fail or produce an unintended result when characters are outside its byte range. MDN covers the browser APIs and this encoding distinction in its btoa() reference.
Use the API documentation for your target runtime when choosing the precise byte-conversion method. The important point is to encode the SVG’s UTF-8 bytes, rather than treating every JavaScript string as if it were already a byte sequence.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteBase64 is optional for SVG
SVG is text-based markup, so it can appear in a data URL without Base64. In that form, characters that would conflict with URL syntax or the surrounding HTML or CSS need appropriate escaping. For example:
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E
Percent-encoding the markup is valid, but encoding only characters that need escaping can make the URL shorter. The exact escaping also depends on the context that contains the URL: CSS quoting and URL encoding are separate concerns. MDN’s CSS <url> reference shows encoded SVG markup and selective escaping, including %23 for a # in a color value.
Choose the representation that fits the destination
| Option | Readability and editing | Size and reuse | When it fits |
|---|---|---|---|
| Base64 data URL | The SVG markup is obscured in the payload. | Base64 can expand text; compare the complete output for your asset. The URL embeds the payload at each use. | Use when the receiving integration specifically expects a Base64 data URL, or when arbitrary bytes must be represented as text. |
| Percent-encoded SVG data URL | The markup remains more recognizable, though URL escapes and surrounding syntax still need care. | Its length depends on the markup and escaping. Compare the complete URL with the Base64 version. | Useful for short inline SVG markup where the consumer accepts a non-Base64 data URL. |
Separate .svg file |
The original markup remains straightforward to maintain. | A single file can be referenced in multiple places; reuse and caching behavior depend on how it is served and consumed. | Often simpler for larger or reused SVGs, or when the graphic relies on linked resources. |
There is no universal size increase that applies to every SVG. Base64 representation, padding, payload contents, and compression or transport layers affect the comparison. If size matters, compare the complete URLs or files you will actually deliver.
Check rendering and resource restrictions
Where SVG is used as an image, such as in an <img> element or CSS background-image, scripts may be disabled and external resources may not load. Those restrictions differ from using an SVG as a document through elements such as <iframe>, <object>, or <embed>. MDN explains the image-context restrictions in its SVG as an image guide.
CSS resource fetching can also be subject to CORS restrictions depending on the property and resource context; see MDN’s CSS URL reference. A data URL embeds its own payload, but an SVG may still refer to other resources. Data URLs do not have relative URL forms, so scrutinize any relative references inside an embedded SVG. The RFC 2397 specification describes the data URL scheme.
Keep data URLs short and compare the complete result
RFC 2397 says, “The ‘data:’ URL scheme is only useful for short values.” Its discussion includes historical SGML and HTML attribute limits as examples; those 1998 figures are not current browser caps. Applications can impose their own length limits, and no single current browser limit applies universally.
For a small, one-off graphic, an inline data URL may be convenient. For a large SVG, one used in several places, or one that depends on linked assets, a separate file is often easier to maintain. Check whether the target accepts the chosen representation and test the finished URL in that context.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Quick Recap
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.
