How to embed svg logos in email templates using data uris
- Step 1Prepare your SVG — Ensure the SVG uses single-quoted attributes (the CSS Data URI Generator handles this). Remove any JavaScript or external references — email clients strip these.
- Step 2Generate the data URI — Run the SVG through the JAD tool. Select the img format option to get: img src='data:image/svg+xml,...' with correct alt, width, and height attributes.
- Step 3Test across email clients — Use Email on Acid or Litmus to test rendering across Gmail, Outlook, and Apple Mail. Verify the logo appears even in the images-blocked state.
Frequently asked questions
Does SVG data URI work in Outlook desktop?+
Outlook desktop uses the Word HTML rendering engine with limited SVG support. Use a PNG fallback via conditional comments: <!--[if mso]><img src='logo.png'><![endif]-->.
Can I use SVG as background-image in email CSS?+
CSS background-image data URIs are not reliably supported in email clients. Use inline img src='data:image/svg+xml,...' for email SVG embedding.
Are there size limits for data URI images in email?+
Gmail strips email body images over 2 MB. Keep your data URI SVG under 100 KB encoded. Most logos are well under this limit.
Does removing metadata help for email use?+
Yes. Run the Metadata Scrubber before encoding — smaller SVG means a shorter data URI string, which reduces HTML payload.
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.