使用MimeKit发送含SVG的HTML邮件到Gmail时图片不显示

Gmail 出于安全策略限制，默认直接过滤邮件正文中直接内嵌的<svg>标签——SVG支持内嵌脚本、外部资源引用，是钓鱼、恶意代码传播的高风险载体，Gmail的邮件渲染引擎会直接剔除所有内联SVG代码，这和你使用MimeKit发信的逻辑无关，是邮箱端的强制规则，目前没有可行的hack方式绕过这个限制。

另外你当前的代码本身存在3个会加剧显示异常的问题：

• HTML拼接结构断裂：开头<td align='right'>标签未闭合就直接插入日期、正文内容，后半段社交图标的<td>标签没有和前面的表格结构对齐，DOM层级混乱，Gmail渲染器遇到错乱标签会直接截断后续内容
• SVG属性存在语法错误：比如enable - background、xml: space属性中间多了多余空格，密码行错误插入了转义的</b>标签，异常语法会触发Gmail的内容过滤规则
• 样式兼容性差：给单元格写了display: flex这类CSS3属性，Gmail对flex布局支持度极低，即使图片能显示也会出现严重错位；手动添加CToWUd类是Gmail给外链图片自动追加的类名，手动添加反而可能被判定为异常内容。

方案1：转位图内嵌（兼容性100%，推荐） #

这是商业邮件通用的处理方式，所有主流邮箱、客户端都能正常显示：

1. 提前把所有SVG图标、SVG内容导出为PNG格式（简单图标可以提前导出静态文件存到服务端，动态SVG可以用SVG.NET等库在后端实时转PNG）
2. 用MimeKit的LinkedResources把图片作为内嵌资源附加，通过cid引用，替换原来的内联SVG位置
   参考修改代码：

BodyBuilder emailBodyBuilder = new BodyBuilder();
// 加载内嵌图标资源
var twitterRes = emailBodyBuilder.LinkedResources.Add(Path.Combine(resourcePath, "twitter.png"));
twitterRes.ContentId = MimeUtils.GenerateMessageId();
var fbRes = emailBodyBuilder.LinkedResources.Add(Path.Combine(resourcePath, "facebook.png"));
fbRes.ContentId = MimeUtils.GenerateMessageId();

// 替换原SVG标签为img引用cid
var twitterTag = $"<a href='http://twitter.com' target='_blank' style='text-decoration:none;'><img src='cid:{twitterRes.ContentId}' width='48' height='48' alt='Twitter' style='border:0;display:block;'/></a>";
var fbTag = $"<a href='https://www.facebook.com' target='_blank' style='text-decoration:none;'><img src='cid:{fbRes.ContentId}' width='24' height='24' alt='Facebook' style='border:0;display:block;'/></a>";

// 重新拼接HTML时注意闭合所有表格标签，去掉flex样式，用align/valign属性做对齐
var htmlData = @"<table cellpadding='0' cellspacing='0' width='650' style='background-color:#f5f5f5;margin:0 auto;color:#666465;min-width:650px'>
<tbody>
  <tr style='background-color:#00a8da; height:61px'>
    <td style='vertical-align:middle'>
      <table width='100%' cellpadding='0' cellspacing='0' height='60'>
        <tbody>
          <tr>
            <td style='width:5%'></td>
            <td style='color:#fff;width:72%;font-size:14px;letter-spacing:1px'><b style='font-size: 17px;'> New Account Details</b></td>
            <td align='right'>##Date</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
  <!-- 正文区域、社交图标区域按结构正常拼接，所有标签正确闭合 -->
</tbody>
</table>";
// 后续替换占位符、发信逻辑不变

方案2：SVG转base64嵌入img标签（不推荐） #

可以把SVG文件转成base64编码，放到<img>标签的src属性中，格式为<img src="data:image/svg+xml;base64,【base64字符串】" />，但这个方案兼容性很差：

• Gmail会拦截超过8KB的data URI图片
• 2016及以前版本的Outlook完全不识别data URI图片
• 部分企业邮箱会直接过滤带data URI的邮件内容

写邮件HTML不要套用普通网页的开发思路：

• 不要使用<svg>、<script>、<iframe>这类高风险标签，所有邮箱基本都会过滤
• 布局优先用原生表格属性（align、valign、cellpadding、cellspacing），尽量少用CSS3属性，不要用flex、grid布局
• 所有图片尽量用cid内嵌，不要用外链图片，Gmail默认会拦截外链图片，需要用户手动点击“显示图片”才能加载

内容的提问来源于stack exchange，提问作者M Sanni