How to convert an SVG to Base64 on a Mac
You can do this with B64, on your own machine. Here is how, plus the one thing that makes SVG different from every other format on this list.
SVG is the odd one out. Every other image format is binary, which is the whole reason Base64 exists. An SVG is already text — markup you could read in an editor — and yet Base64 is still the most reliable way to get one into a stylesheet.
This guide covers encoding an SVG in B64, why you would bother, and what to watch for.
The conversion runs in the app, on your Mac. Nothing is uploaded and there is no account, so a picture that should not leave the building does not have to.
Encode an SVG
Open Encode
Click Encode in the sidebar or press ⌘1.
Load the SVG
Drag it from the Finder onto the Encode area, click Choose File… (⌘O), or press ⇧⌘V to encode a copy already on your clipboard.
Pick the output format
CSS Background is the usual destination for an encoded SVG; Data URI and HTML are the other two that come up.
Copy or export
Copy (⇧⌘C) or Export… (⌘E).
Why encode something that is already text?
Because raw SVG markup is full of characters that fight with the syntax you are pasting into. Angle brackets, quotation marks, hash symbols in colour values, ampersands in entities — each of these has to be escaped differently depending on where the markup lands, and the escaping rules for CSS, HTML attributes and Markdown are all different from one another.
Base64 sidesteps every one of those problems. The output is 64 characters that mean nothing to any surrounding syntax, so the same string pastes safely into a stylesheet, an attribute or a document without a single escape.
Base64 costs about 33% in size and makes the markup unreadable and un-diffable. For an icon that never changes, that is a fair price for never thinking about escaping again. For an SVG you expect to edit in place, it is not.
The MIME type
A data URI from an SVG declares image/svg+xml, which is the correct type and the one consumers expect. Getting this wrong is a common cause of an SVG that silently refuses to render. B64 writes it for you rather than leaving it to be typed by hand.
Encoding, and character encoding
These are two different things with confusingly similar names. Base64 encodes bytes. An SVG file's bytes are its text in whatever character encoding it was saved in — normally UTF-8.
So a UTF-8 SVG encodes and decodes perfectly, accented characters and all. An SVG saved in some other encoding is carried faithfully too, but arrives at the far end still in that encoding, which is where a consumer expecting UTF-8 may render the text inside it incorrectly. If an encoded SVG shows garbled labels, save the source as UTF-8 and encode it again.
What stays inside
Everything in the file: paths, groups, gradients, embedded CSS, fonts referenced by name, comments, and the editor metadata that design tools like to leave behind. Base64 carries the file, not a cleaned-up version of it — so if you want a tidy SVG, tidy it before you encode.
Two things that do not come along, because they were never in the file: anything the SVG references over the network, and fonts that are named rather than embedded. An encoded SVG that expects a font to be installed still expects it.
Copying and exporting the result
Copy (⇧⌘C) puts the complete string on the clipboard. Export… (⌘E) writes it to a .txt file. Both always use the whole result, even when a long one is displayed in pages.
If you find yourself doing this often, turn on copy after encoding in B64 ▸ Settings… ▸ General. Dropping the file then is the whole interaction — the result is on your clipboard before you have reached for a shortcut.
Troubleshooting
The encoded SVG does not render
Check three things in order: that the whole string arrived, that the MIME type in the data URI still says image/svg+xml, and that the SVG has a viewBox or explicit dimensions — a vector with no intrinsic size is a common cause of an image that is technically there and visually absent.
The text inside the SVG comes out garbled
A character-encoding mismatch rather than a Base64 problem. Save the SVG as UTF-8 and encode it again.
It renders, but the font is wrong
The font was referenced, not embedded. Convert the text to outlines in your drawing tool, or embed the font in the SVG, before encoding.
A folder of icons
An icon set is exactly the case for Batch (⌘3): drop the folder in and every SVG is encoded in a single pass, each to its own text file. How to convert a folder of images to Base64.
Frequently asked questions
Why encode an SVG at all when it is already text?
To avoid escaping. Raw SVG markup is full of angle brackets, quotes and hashes that have to be escaped differently in CSS, in HTML attributes and in Markdown. Base64 output contains none of those characters, so one string pastes safely anywhere.
What MIME type does the data URI use?
image/svg+xml, which is what consumers expect. B64 writes it for you, which removes one of the most common causes of an SVG that quietly refuses to render.
Do fonts used in the SVG travel with it?
Only if they were embedded in the file. A font referenced by name is still just a name after encoding. Convert text to outlines or embed the font before you encode.
Is the SVG minified or cleaned up when I encode it?
No. The exact bytes of the file are encoded, editor metadata and all. Tidy the SVG first if you want a tidy payload.