SVG Icons Not Displaying Properly in HTML Email Clients - implementing Gmail and Outlook
I'm integrating two systems and I'm working on a project and hit a roadblock. I'm working with an scenario where SVG icons are not rendering correctly in HTML emails when viewed in Gmail and Outlook. I've embedded the SVG directly into the HTML rather than linking to an external file. In Gmail, it displays as a broken image link, while Outlook shows a blank square instead of the icon. Here’s the code snippet I’m using: ```html <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="10" fill="blue" /> </svg> ``` I’ve also added a fallback PNG image using the `alt` attribute, but it doesn’t help in this case. I've tried wrapping the SVG in a `<div>` with a defined width and height, but that doesn't seem to fix the scenario either. This is part of a larger email template, and I need the icons to be consistent across all clients. I’ve researched using base64 encoding for SVGs and even tried inline styles, but I’m still not getting the desired result. Are there any best practices for using SVGs in HTML emails that can guide to resolve this? Has anyone else encountered similar problems with Gmail or Outlook handling SVG images? I'm working on a web app that needs to handle this. The project is a mobile app built with Html. How would you solve this?