如何将 SVG 嵌入到电子邮件中的 HTML 中，以便在大多数/所有电子邮件浏览器中可见？

Posted 2023-02-24

【中文标题】如何将 SVG 嵌入到电子邮件中的 HTML 中，以便在大多数/所有电子邮件浏览器中可见？

【英文标题】：How can I embed SVG into HTML in an email, so that it's visible in most/all email browsers?

【发布时间】：2016-10-11 18:09:14

【问题描述】：

我想在 SVG 中生成图表，并通过电子邮件发送一个 html 页面，其中嵌入了这些图表（不存储在服务器上并显示链接图像）。

我尝试使用 Object 元素直接嵌入 SVG，并对 SVG 进行序列化和 URI 编码，并将整个字符串指定为 div 上的背景图像。 Outlook 2013 中似乎没有显示任何内容。有什么想法吗？

【问题讨论】：

css-tricks.com/a-guide-on-svg-support-in-email

我之前找到了那个页面。我认为我不能为这些图表使用 JPEG 备份，因为它们是动态生成的。我要询问的是任何允许只使用 SVG 的很酷的 hack。

我怀疑你可以“酷破解”任何使用 MS Word 布局引擎渲染 HTML 以正确显示 SVG 的东西，考虑到电子邮件中图像的附加限制（通常不从外部下载出于隐私原因的资源，嵌入为内联图像或通过<svg> 是不可能的，因为渲染引擎的史前性等。）

【参考方案1】：

许多电子邮件客户端不支持 SVG。我见过的最好的指南是Style Campaign。我保证这是一篇简短的读物（安娜超级聪明！）。

TL;DR：ios 邮件客户端和（令人惊讶的）Blackberry 中可以使用多种技术。但 android、Outlook 以及几乎所有其他桌面和网络邮件客户端都不支持 SVG，需要备用。

【讨论】：

我们可以得到这个回复的更新，因为它已经 4 岁了？

@GeorgeVasilopoulos 很遗憾没有重大更新。电子邮件客户端不像浏览器那样更新，支持与 2016 年基本相同。

非常感谢@Ted，非常感谢。

【参考方案2】：

更新：“Windows、Mac、Android 和 Windows Mobile 上的 Microsoft Word、PowerPoint、Outlook 和 Excel for Office 365支持在您的文档、演示文稿、电子邮件和工作簿。" (Edit SVG images in Microsoft Office 365)

来自Insert icons in Microsoft Office 指南中的“插入 SVG 文件”部分

插入 SVG 文件

SVG 代表可缩放矢量图形文件，这意味着您可以 在不损失图像质量的情况下旋转、着色和调整文件大小。 Office 应用程序，包括 Word、PowerPoint、Outlook 和 Excel，支持 插入和编辑 SVG 文件。

在 Office for Windows 中插入 SVG 文件：将文件从 Windows 文件资源管理器拖放到您的文档中。

在 Office for Mac 中插入 SVG 文件：转至插入 > 图片 > 来自文件的图片以插入 SVG 图像。

在 Android 或 Windows Mobile 上的 Office 中插入 SVG 文件：请参阅 Add pictures or videos to a file by using your mobile device 了解 更多信息。

---

一个例子

需要将我们非营利组织的徽标转换为 SVG 以使其看起来正确，所以

查找了一个在线工具（在我的例子中是通过谷歌搜索“png to svg”）

网站生成了，如果我不注册就不让我下载。

在开发者控制台中打开 SVG 图像（Chrome：右键单击图像并选择“检查”）

将整个<svg>标签复制到一个简单的文本文件中，并以.svg扩展名（来自this SO thread）保存。

在 Outlook 中，“转到插入 > 图片 > 文件中的图片以插入 SVG 图像。”

【讨论】：

在 Windows 上，从文件资源管理器中拖放会为我生成附件，而不是嵌入的图像。从功能区中选择“插入”>“图片”允许我选择 SVG，但在发送时，很明显它已被转换为 JPEG。

【参考方案3】：

将文件作为附件导入 ProtonMail，发送给自己，然后下载。从来没有遇到过任何问题。