Laravel邮件类中img标签引用的SVG文件无法显示，Blade网页端显示正常

核心原因 #

绝大多数主流邮件客户端（包括全版本Outlook、Gmail、旧版苹果邮件等）均不支持<img>标签外链SVG格式的图片，部分客户端会直接拦截SVG资源、同时屏蔽alt文本展示，这就是Blade网页预览正常、邮件发送后显示异常的根本原因。

可落地修复方案 #

方案1：转换为通用图片格式（兼容性最高，优先推荐） #

将SVG源文件提前转换为PNG/JPG这类所有邮件客户端都支持的光栅格式，替换img标签的src地址即可，代码示例：

<a href="{{ $url }}">
  <img alt="Logo" height="36" src='https://example.com/someFile.png' width="127">
</a>

如果需要动态处理SVG转图片，可以用intervention/image等Laravel常用图片处理扩展在发信前完成转换。

方案2：内联SVG代码（适配需要保留矢量效果的场景） #

直接把SVG的完整代码写入邮件模板，不要用img标签外链，注意内联前要把SVG内部的所有样式改为行内样式，移除所有外部资源引用：

<a href="{{ $url }}">
  <svg width="127" height="36" viewBox="0 0 127 36" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- 此处替换为你的SVG内部路径代码 -->
  </svg>
</a>

注意：该方案对复杂SVG兼容性一般，Outlook等客户端对部分SVG属性支持有限，建议发送前提前测试。

方案3：添加降级 fallback #

如果暂时没法替换SVG，可以给img标签添加备用资源降级逻辑，虽然部分客户端会禁用JS触发的逻辑，但可以覆盖一部分支持的场景：

<a href="{{ $url }}">
  <img alt="SVG" height="36" src='https://example.com/someFile.svg' width="127" onerror="this.src='https://example.com/someFile.png'">
</a>

额外注意事项 #

• 不要在SVG中使用外部引用字体、自定义滤镜这类依赖外部资源的效果，所有邮件客户端都会默认拦截这类资源
• 发信前可以用Laravel自带的日志驱动、或者本地邮件测试工具先预览效果，避免上线后显示异常

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