When should I use Base64 SVGs?

Base64 and Data URIs are useful for small icons and to reduce HTTP requests, especially for CSS backgrounds. They eliminate an extra round trip to the server and can improve load time for above-the-fold elements.

Base64 or URL-encoded — which is better?

For SVGs, URL-encoding (percent-encoding) is usually the better choice. It produces a smaller string and compresses better with GZIP and Brotli. Base64 increases file size by about 33% but is universally supported and simpler to embed in some build tools.

Do Data URI SVGs work in all browsers?

Yes. Data URIs are supported in every modern browser including Chrome, Firefox, Safari, and Edge. Extremely long URIs can hit URL length limits in very old browsers, but for typical icons this is not a concern.

Is my SVG code sent to a server?

No. All conversion runs 100% locally in your browser using JavaScript. Your SVG code never leaves your device — nothing is uploaded, logged, or stored anywhere.

Can I embed fonts in an SVG Data URI?

Yes, but it is inefficient — fonts make the Data URI very large. The better approach is to convert text to paths before embedding, which removes the font dependency entirely. Tools like Illustrator, Figma and Inkscape do this when exporting SVG.

Why does my SVG look different after Data URI encoding?

Common causes: missing viewBox attribute (the SVG renders at an unexpected size), unencoded # characters in fill colors (breaks URL-encoded form), or external references (fonts, images) that cannot be embedded. Check the preview before copying — it uses the encoded string, so what you see is what will render.

SVG to Base64 Converter

Turn SVG markup into a Data URI for CSS backgrounds or inline HTML. Get ready-to-use snippets in four flavours: URL-encoded CSS background, Base64 CSS background, HTML img tag and raw Data URI. Live SVG preview confirms the rendering before you copy.

How to use

Paste your SVG code

Drop the raw SVG markup into the input field.

Preview the SVG

See a live preview of the rendered SVG above the output.

Choose a snippet

Pick CSS background (URL-encoded or Base64), HTML img, or raw Data URI.

Copy the snippet

Copy the ready-to-use snippet and paste it into your CSS or HTML.

Paste SVG Code

Ready to Use Snippets

CSS Background (URL Encoded)Optimal

background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 100 100%22 width%3D%22100%22 height%3D%22100%22%3E%0A  %3Ccircle cx%3D%2250%22 cy%3D%2250%22 r%3D%2240%22 fill%3D%22%234f46e5%22 %2F%3E%0A  %3Cpath d%3D%22M35 50l10 10 20-20%22 stroke%3D%22%23fff%22 stroke-width%3D%228%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 fill%3D%22none%22 %2F%3E%0A%3C%2Fsvg%3E");

CSS Background (Base64)

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIGZpbGw9IiM0ZjQ2ZTUiIC8+CiAgPHBhdGggZD0iTTM1IDUwbDEwIDEwIDIwLTIwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiAvPgo8L3N2Zz4=");

HTML Img Tag

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIGZpbGw9IiM0ZjQ2ZTUiIC8+CiAgPHBhdGggZD0iTTM1IDUwbDEwIDEwIDIwLTIwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiAvPgo8L3N2Zz4=" alt="SVG Image" />

Raw Base64 Data URI

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIGZpbGw9IiM0ZjQ2ZTUiIC8+CiAgPHBhdGggZD0iTTM1IDUwbDEwIDEwIDIwLTIwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIiAvPgo8L3N2Zz4=