如何在邮件模板中添加SVG？两种嵌入方式失败求助

针对直接内嵌SVG的问题 #

你的内嵌SVG无法渲染，主要有两个原因：

• 邮件客户端普遍不支持通过class引用样式，你的<path>标签用了dice-1/dice-2类，但没有实际填充颜色，导致图标看起来“消失”；
• enable-background这类属性在多数邮件客户端中不兼容，会干扰渲染。

修正后的内嵌SVG代码 #

移除不兼容属性，给路径添加内联填充样式：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-227 241 225.3 224.1" xml:space="preserve">
  <path style="fill:#000000" d="M-132,241h-72.3c-12.4,0-22.6,10.2-22.6,22.6V336c0,12.4,10.2,22.6,22.6,22.6h72.3c12.4,0,22.6-10.2,22.6-22.6
    v-72.3C-109.4,251.2-119.6,241-132,241z M-195.3,340.5c-7.5,0-13.6-6.1-13.6-13.6c0-7.5,6.1-13.6,13.6-13.6
    c7.5,0,13.6,6.1,13.6,13.6C-181.8,334.4-187.9,340.5-195.3,340.5z M-195.3,286.2c-7.5,0-13.6-6.1-13.6-13.6
    c0-7.5,6.1-13.6,13.6-13.6c7.5,0,13.6,6.1,13.6,13.6C-181.8,280.1-187.9,286.2-195.3,286.2z M-168.2,313.3
    c-7.5,0-13.6-6.1-13.6-13.6c0-7.5,6.1-13.6,13.6-13.6s13.6,6.1,13.6,13.6C-154.7,307.3-160.7,313.3-168.2,313.3z M-141.1,340.5
    c-7.5,0-13.6-6.1-13.6-13.6c0-7.5,6.1-13.6,13.6-13.6c7.5,0,13.6,6.1,13.6,13.6C-127.5,334.4-133.6,340.5-141.1,340.5z
     M-141.1,286.2c-7.5,0-13.6-6.1-13.6-13.6c0-7.5,6.1-13.6,13.6-13.6c7.5,0,13.6,6.1,13.6,13.6C-127.5,280.1-133.6,286.2-141.1,286.2
    z"/>
  <path style="fill:#000000" d="M-24.3,347.5h-72.3c-12.4,0-22.6,10.2-22.6,22.6v72.3c0,12.4,10.2,22.6,22.6,22.6h72.3
    c12.4,0,22.6-10.2,22.6-22.6v-72.3C-1.7,357.7-11.9,347.5-24.3,347.5z M-87.6,447c-7.5,0-13.6-6.1-13.6-13.6
    c0-7.5,6.1-13.6,13.6-13.6c7.5,0,13.6,6.1,13.6,13.6C-74.1,441-80.1,447-87.6,447z M-60.5,419.9c-7.5,0-13.6-6.1-13.6-13.6
    c0-7.5,6.1-13.6,13.6-13.6s13.6,6.1,13.6,13.6C-46.9,413.8-53,419.9-60.5,419.9z M-33.4,392.8c-7.5,0-13.6-6.1-13.6-13.6
    s6.1-13.6,13.6-13.6s13.6,6.1,13.6,13.6S-25.9,392.8-33.4,392.8z"/>
</svg>

注：#000000可替换为你需要的图标颜色

针对img标签引用SVG的问题 #

你的代码有两个明显错误：

• 使用了中文引号“”，需替换为英文引号""；
• 相对路径/Facebook.svg无法被邮件客户端解析，必须使用完整的绝对URL（比如https://你的域名/Facebook.svg）。

修正后的img标签代码 #

<img src="https://your-domain.com/Facebook.svg" alt="Facebook图标" />

兼容性补充 #

如果需要兼容Outlook 2016及更早这类对SVG支持极差的客户端，建议将SVG转为PNG/JPG格式后再用img标签引用，能彻底解决渲染问题。

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