Outlook组织级签名中SVG无法显示的原因及修复方法

问题原因 #

Outlook采用基于Word的HTML渲染引擎，对原生<svg>标签的支持存在严重限制，邮件签名场景下这类标签会被直接过滤或无法解析。而<img>标签引用的外部位图资源（如JPG/PNG）符合Outlook的渲染兼容规范，因此可以正常显示。

修复方案 #

方案1：转换为位图资源（推荐） #

将SVG文件导出为PNG或JPG格式的位图，然后用标准<img>标签引用，完全兼容所有Outlook版本：

<img src="https://your-domain.com/red-circle.png" width="100" height="100" alt="Red circle">

方案2：SVG转为Data URI嵌入 #

把SVG代码编码为Base64格式的Data URI，嵌入到<img>标签中，部分新版本Outlook支持这种方式：

<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0icmVkIiAvPgo8L3N2Zz4=" width="100" height="100" alt="Red circle">

提示：旧版Outlook可能不支持Data URI，需测试验证后再部署。

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