How to embed svg logos in email templates using data uris
- Step 1Strip the SVG down for email — Remove editor metadata with svg-metadata-scrubber and any
<script>or external references — email clients sanitise scripts and won't fetch external resources from inside a data URI. A smaller, self-contained SVG means a shorter inline string. - Step 2Encode the SVG — Run it through the CSS Data-URI Generator to get the URL-encoded
data:image/svg+xml;charset=utf-8,...value. The tool also converts double quotes to single quotes, which is exactly what you need for embedding the value inside HTML attributes. - Step 3Put the URI in an <img>, not a CSS background — CSS
background-imagedata URIs are unreliable in email. Copy the value from inside the generatedurl("...")and place it in<img src="data:image/svg+xml,..." alt="..." width="..." height="...">with explicit dimensions and alt text. - Step 4Add a PNG fallback for Outlook — Outlook desktop can't render SVG. Wrap a hosted-PNG
<img>in<!--[if mso]>...<![endif]-->and hide the SVG<img>from MSO, so Word-engine clients get the raster and everyone else gets the vector. - Step 5Test across real clients — Use Litmus or Email on Acid to preview Gmail (web/app), Apple Mail, Outlook desktop/web, and Thunderbird — specifically in the images-blocked state — to confirm the logo appears for everyone.
- Step 6Watch the total payload — Some clients clip large messages (Gmail famously clips beyond ~102 KB). Keep the encoded logo small; if it's still heavy as SVG, consider a base64 PNG via svg-to-base64 plus a rasteriser, or host the image and accept the blocking trade-off.
SVG data URI support by email client
Generalised behaviour; always verify with a testing service because client rendering shifts over time. 'SVG in img' means a data:image/svg+xml value in an <img src>.
| Client | SVG data URI in <img> | Recommended approach |
|---|---|---|
| Apple Mail (macOS/iOS) | Supported | SVG data URI works well |
| Gmail (web/app) | Generally supported | SVG data URI usually fine; test, mind clipping |
| Outlook desktop (Windows, Word engine) | Not supported | PNG fallback via MSO conditional comments |
| Outlook.com / web | Inconsistent | Provide PNG fallback to be safe |
| Thunderbird | Supported | SVG data URI works |
| CSS background-image data URI (any client) | Unreliable | Use an <img>, not a background |
Pre-encode checklist for email
Do these before encoding to keep the inline payload small and the markup client-safe.
| Step | Tool / action | Why it matters for email |
|---|---|---|
| Remove editor metadata | svg-metadata-scrubber | Shorter data URI → smaller HTML payload |
| Trim coordinate precision | svg-pro-minifier | Fewer bytes encoded per path |
| Strip scripts / external refs | Manual / scrubber | Clients sanitise scripts; data URIs can't fetch externally |
| Quotes normalised to single | Done by the encoder | Lets the value sit cleanly inside an HTML attribute |
| Prepare a PNG fallback | Raster export + host it | Outlook desktop needs raster |
Cookbook
Working email snippets. The SVG URI value comes from the generator's url("...") output; the surrounding HTML is yours.
Logo as an inline <img>
Take the value from inside the generated rule and drop it into an img with explicit dimensions and alt text — the standard email-safe pattern.
Generated by the tool:
.icon-logo { background-image: url("data:image/svg+xml;charset=utf-8, ... "); ... }
For email, use only the value:
<img
src="data:image/svg+xml,%3Csvg ... %3E"
alt="Acme"
width="160" height="40"
style="display:block;border:0;" />Outlook PNG fallback with MSO comments
Outlook desktop renders the PNG; everyone else gets the crisp SVG. The SVG img is hidden from MSO so Outlook doesn't show a broken vector.
<!--[if mso]>
<img src="https://cdn.example.com/logo.png"
alt="Acme" width="160" height="40" />
<![endif]-->
<!--[if !mso]><!-- -->
<img src="data:image/svg+xml,%3Csvg ... %3E"
alt="Acme" width="160" height="40"
style="display:block;border:0;" />
<!--<![endif]-->Scrub before you encode
Editor metadata can double the byte count of a simple logo. Strip it first so the inline string stays lean.
logo.svg (from Illustrator): 4.1 KB → svg-metadata-scrubber → 1.9 KB → svg-pro-minifier → 1.3 KB → encode → short data URI suitable for inline email (Smaller payload = less risk of Gmail message clipping.)
Why not a CSS background in email
CSS background-image data URIs are inconsistently supported across clients. The img approach is the reliable one.
Avoid in email:
<td style="background-image:url('data:image/svg+xml,...')">
(Outlook ignores it; others vary.)
Prefer:
<td><img src="data:image/svg+xml,..." alt="..." ...></td>Raster fallback path with base64
When you need an inline raster (for Outlook or maximal compatibility), base64-encode a PNG — a different tool than this URL-encoder.
SVG → rasterise to PNG (your build) → /svg-tools/svg-to-base64 style base64 for the PNG → <img src="data:image/png;base64,iVBORw0K..." alt="..."> (For the SVG itself, this tool's URL-encoding is smaller; base64 is for the raster fallback.)
Edge cases and what actually happens
Outlook desktop shows nothing for the SVG
Not supportedOutlook on Windows renders HTML through Microsoft Word, which has no SVG support. An SVG data URI simply doesn't appear. Always pair it with a hosted-PNG fallback inside <!--[if mso]>...<![endif]--> so Outlook users see a logo.
CSS background-image data URI ignored
Unreliable in emailEven where browsers handle CSS background-image data URIs perfectly, email clients do not consistently. The generator emits a background-image rule for web use; for email, extract the URI and use it in an <img src> instead.
Message clipped by Gmail
Size limitGmail clips messages above roughly 102 KB and hides the overflow behind a 'View entire message' link. A bulky inline SVG eats into that budget fast. Scrub and minify before encoding, and keep total HTML lean.
External reference inside the SVG
Won't loadAn SVG that references an external image, font, or <use href> won't resolve once inlined as a data URI — and email clients won't fetch it anyway. Flatten all references into the SVG before encoding.
Script or interactivity in the SVG
StrippedEmail clients sanitise <script>, event handlers, and animation that runs JS. Remove these before encoding; rely on static markup only. Anything interactive will be removed or ignored, sometimes silently.
Missing width/height on the img
Layout shiftWithout explicit width and height attributes, some clients render the logo at an unexpected intrinsic size or zero. Always set both on the <img> and consider style="display:block" to avoid baseline gaps.
Forgot alt text
Accessibility gapIf a client still blocks or fails the image, alt text is what the recipient sees. Always include meaningful alt on the logo <img> — it also helps when the SVG is unsupported and no fallback fired.
Hand-editing colours in the inline string
Encoding errorPatching a literal #hex back into an already-encoded URI truncates it at the #. Recolour the source SVG with svg-hex-swapper before encoding, then re-encode — don't edit the escaped string.
Frequently asked questions
Why use a data URI for an email logo?
Email clients block external images by default, so a linked logo shows a placeholder until the recipient allows images. A data URI embeds the logo inline, so it renders immediately with no external request to approve.
Does SVG data URI work in Outlook desktop?
No. Outlook on Windows uses Microsoft Word's HTML engine, which has no SVG support. Provide a hosted-PNG fallback inside <!--[if mso]>...<![endif]--> conditional comments so Outlook users see a raster logo.
Should I use the CSS background-image output for email?
No. CSS background-image data URIs are unreliable across email clients. Take the value from inside the generator's url("...") and put it in an <img src> with explicit width, height, and alt.
Which clients render SVG data URIs reliably?
Apple Mail, Gmail (web/app, generally), and Thunderbird handle SVG data URIs in <img> well. Outlook desktop does not, and Outlook web is inconsistent — always test and provide a fallback.
Is there a size limit for inline images in email?
There's no single SVG limit, but Gmail clips whole messages beyond about 102 KB. Keep the encoded logo small — scrub metadata and minify first — so the inline payload doesn't push you over.
Does removing metadata help for email?
Yes. Run svg-metadata-scrubber before encoding. Less markup means a shorter data URI and a smaller HTML payload, which reduces the chance of message clipping.
URL-encoded or base64 for an email SVG?
For the SVG itself, URL-encoding (this tool) is smaller. Use base64 (svg-to-base64) mainly for a raster PNG fallback that you want inline rather than hosted.
Do I need single quotes in the SVG for email?
The encoder already converts double quotes to single quotes, which is what lets the value sit inside an HTML src attribute without breaking. You don't have to prepare them manually.
Will animation or interactivity survive in email?
No. Email clients sanitise scripts and most interactivity. Use static SVG only; remove <script> and JS-driven animation before encoding.
What about dark mode in email?
Some clients invert or recolour images in dark mode. A data-URI SVG can't respond to the client's theme via CSS, so design a logo that reads on both backgrounds, or supply a version with a transparent-safe colour.
Can I theme the inline SVG's colour per recipient?
No. A data-URI SVG is isolated and email CSS support is limited regardless. If you need different colours, generate separate encoded versions or recolour the source with svg-hex-swapper before encoding each.
What tier do I need to generate the data URI?
The CSS Data-URI Generator is a Pro-tier tool. The encoding runs in your browser; nothing is uploaded.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.