电子邮件中 SVG 支持指南

我们在 CSS-Tricks 上 多次讨论过 SVG，但我们还没有涉及到电子邮件领域。现在 浏览器对 SVG 的支持都已全面实现，我们很容易假设可以开始在所有地方使用 SVG。但是，如果您之前使用过电子邮件，您可能会知道，在功能支持方面，它通常远远落后于 Web。就像加州看待北达科他州的趋势一样：仅仅落后几年。 :)

本文深入探讨了四种不同的 SVG 使用方法，并比较了这些方法在几种最流行的电子邮件应用程序中的支持情况。让我们看看在哪里可以获得最多的支持。

• SVG 作为图像标签
• SVG 作为内联 HTML
• SVG 作为 CSS 背景图像
• SVG 作为对象嵌入
• 奖励：带 JPG 备用方案的 SVG

---

SVG 作为图像标签

使用 SVG 作为简单的 标签就像将任何其他图像文件放置到屏幕上一样，只是我们引用的是 SVG 文件而不是 JPG 或 PNG 等文件。

<img src="my-image.svg" alt="A pair of flat black dice, one on 5 and one on 3">

以下是此技术的支持情况

AOL Web	Outlook 2013	Outlook .com	雅虎！	邮件（OSX）	邮件（iOS）	Gmail	Gmail（iOS）	Gmail（Android）	Android
是	否	是	是	是	是	否	否	是	否

总支持率 60%

SVG 作为内联 HTML

在此测试中，我们将 SVG 文件的代码直接从 Illustrator 中提取出来，并将其直接放置到电子邮件的 HTML 中。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-227 241 225.3 224.1" style="enable-background:new -227 241 225.3 224.1;" xml:space="preserve">
  <path class="dice-1" 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 class="dice-2" 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>

支持度比我预期的要低得多。

AOL Web	Outlook 2013	Outlook.com	雅虎！	邮件（OSX）	邮件（iOS）	Gmail	Gmail（iOS）	Gmail（Android）	Android
否	否	否	否	是	是	否	否	否	是*

总支持率：25%（将 Android 计为部分支持）

您可能已经注意到我为每个路径分配了类名。如果您希望这些识别内联 SVG 的电子邮件客户端也支持 SVG 的 CSS 属性，那么您很幸运。它们确实支持，而且是全面支持。

fill

邮件（OSX）	邮件（iOS）	Android
是	是	是

stroke

邮件（OSX）	邮件（iOS）	Android
是	是	是

SVG 作为 CSS 背景图像

我们可以使用 SVG 作为 CSS 中的背景图像。

.my-element {
  background-image: url("my-image.svg");
  background-repeat: no-repeat;
}

AOL Web	Outlook 2013	Outlook.com	雅虎！	邮件（OSX）	邮件（iOS）	Gmail	Gmail（iOS）	Gmail（Android）	Android
是	否	否	是	是	是	否	否	否	否

总支持率 40%

请注意，某些电子邮件应用程序已知会从文档中删除 CSS 。在这种情况下，最佳实践是在内联样式的同时，也将其包含在 中。

此外，如果我们正在处理响应式设计，则 CSS 背景会有点不可预测。保持宽度和高度成比例将很棘手，并且可能比它值得的麻烦更多。

SVG 作为对象嵌入

将 SVG 嵌入为 <object> 非常类似于嵌入媒体文件（如音频或视频）。除了可以使用 CSS 保留一些样式控制之外，其好处还在于可以设置备用图像，以便在不支持 SVG 的情况下使用：

AOL Web	Outlook 2013	Outlook.com	雅虎！	邮件（OSX）	邮件（iOS）	Gmail	Gmail（iOS）	Gmail（Android）	Android
否	否	是*	是*	是†	是	否	否	是	是

总支持率：55%（邮件 OSX 部分支持）

带 CSS 技巧的图像标签

更新：以下技巧旨在利用 Gmail 不支持文档中包含的 CSS 的缺点，但自 2016 年 9 月起 这种情况已不再存在。文章末尾的支持表也已更新以反映此更改。

更新 2（2022 年 12 月 7 日）：<img> 和 <picture> 元素都支持 srcset 属性，因此无需使用以下部分中的 CSS 隐藏方法即可定义图像备用方案。换句话说，我们可以在 <img> 中指定多个文件，让电子邮件客户端自行选择。

<img src="my-image.jpg" 
     alt="A pair of flat black dice, one on 5 and one on 3" 
     srcset="my-image.svg"
/>

感谢 Viktor Mukhachev 提供的提示！

---

此处的结果并不令人鼓舞。我的意思是，最佳支持率为 60%，这有点糟糕。但是，如果我们尝试结合几种不同的技术来获得更好的支持，会怎么样呢？

诀窍如下。首先，我们将为 SVG 添加一个图像标签，为备用 JPG 添加一个图像标签。

<!-- Image: SVG -->
<img src="my-image.svg" alt="A pair of flat black dice, one on 5 and one on 3" role="img">
<!-- Image: JPG -->
<img src="my-image.jpg" alt="A pair of flat black dice, one on 5 and one on 3">

role="img"> 用于解决一个错误，该错误会阻止 VoiceOver 正确识别 SVG 为图像，如 MDN 上所述。

如果我们坚持使用这种方法，就会出现某些电子邮件应用程序显示两个图像，而其他应用程序显示一个图像以及一个损坏的图像符号的情况。太糟糕了。

让我们隐藏那些支持 SVG 的电子邮件应用程序的 JPG。不，Modernizr 不适用于电子邮件，但我们知道一些应用程序会忽略文档 中的任何 CSS。我们可以利用这一点，通过向 JPG 图像元素添加类名并使用 CSS 隐藏它。

<!-- Image: SVG -->
<img src="my-image.svg" alt="A pair of flat black dice, one on 5 and one on 3" role="img">
<!-- Image: JPG -->
<img class="no-showy" src="my-image.jpg" alt="A pair of flat black dice, one on 5 and one on 3">

/* Hide this everywhere, except for those that can’t read this code */
.no-showy {
  display: none;
}

现在我们开始得心应手了！我们已经成功隐藏了所有电子邮件应用程序中的 JPG，除了 Gmail。但是，如果我们在此停止，Gmail 将如何呈现代码呢？

哎呀，这么接近。现在我们需要隐藏 SVG 应该所在位置的损坏图像标签。让我们做几件事。

• 将 SVG 的高度和宽度设置为零。
• 向 SVG 添加一个类名，以调整其大小。

换句话说

<!-- Image: SVG -->
<img class="showy" src="my-image.svg" width="0" height="0" alt="A pair of flat black dice, one on 5 and one on 3" role="img">
<!-- Image: JPG -->
<img class="no-showy" src="my-image.jpg" alt="A pair of flat black dice, one on 5 and one on 3">  

移除 SVG 的内联宽度和高度与隐藏它具有相同的效果。然后，我们通过添加一个类来更改这些尺寸，使其恢复为全尺寸图像，以便支持 SVG 的电子邮件应用程序使用文档 技巧。

/* Resize an element that has a width and height of zero to full size */
.showy {
  height: 100% !important;
  width: 100% !important;
}

/* Hide this everywhere, except for those that can’t read this code */
.no-showy {
  display: none;
}

我们的支持开始看起来好多了。

AOL Web	Outlook 2013	Outlook.com	雅虎！	邮件（OSX）	邮件（iOS）	Gmail	Gmail（iOS）	Gmail（Android）	Android
是	是*	是	是	是	是	否	否	否	是

太棒了！我们对许多客户端都提供了完全的支持，对另一个客户端提供了合理的备用方案，并且不幸的是 Gmail 不支持，而 Gmail 占据了相当大一部分市场份额。

我的最大收获...

...是电子邮件仍然处于前端开发的蛮荒时代。我个人认为使用 SVG 是一种冒险，尤其是在已知您的订阅者依赖 Gmail 的情况下。

也就是说，了解您的受众可能是决定是否可以在电子邮件中使用 SVG 以及是否应该使用 SVG 的关键因素。例如，iOS 应用开发者知道客户通过 OSX 或 iOS 设备查看电子邮件，他们可能会对使用 SVG 感到非常满意。许多电子邮件营销提供商（如 MailChimp 和 Campaign Monitor）通过分析工具轻松提供此信息。Campaign Monitor 还提供一份非常方便的 关于电子邮件应用程序的流行度和市场份额的报告，值得一读。