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

Question

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

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

Answer 1

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

TL;DR：多种技术都可以在 iOS 邮件客户端和（令人惊奇的）黑莓上运行。但 Android、Outlook 和几乎所有其他桌面和网络邮件客户端都不支持 SVG，需要后备。

Answer 2

更新：“Windows、Mac、Android 和 Windows Mobile 上适用于 Office 365 的 Microsoft Word、PowerPoint、Outlook 和 Excel 支持在文档、演示文稿、电子邮件和工作簿中插入和编辑可缩放矢量图形 (.SVG) 文件.”（在 Microsoft Office 365 中编辑 SVG 图像）

来自 在 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 文件：请参阅使用移动设备将图片或视频添加到文件中了解 更多信息。

---

一个例子

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

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

2. 网站生成了它，但如果我不注册，就不会让我下载。

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

4. 将整个

   <svg>

   标签复制到一个简单的文本文件中，并使用

   .svg

   扩展名保存（来自这个SO线程）。

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

Answer 3

你能做的最好的事情就是嵌入一个base64图像 例如

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAABWklEQVR4nO2WTU7DMBCF3yVY8FPEdZAAcQ0oKRdpZxKxAVE2tN2wD3ATijgFLTsCg+y2IkKKPU4clUVHGsmKlHx5z+MZA5v4byEp9oWQCOFZCFNhfNg0a/MsxYX00YkHHGBXGDdCKIQhnvwSwoMwDppBGadCmCuAf3MmjJN6UMKlVRAO/VXP6IUr5UbQMlynXDLsKew1ezla5rfX9ivsaCy+8yohjErujBXKbzVHpogOJhTGSZfaRLV3C3sNcKKwevVOtxrMeIpQUFXg3AV+axE8dVmtbhaln9WC5+sCv7usfm0NzHiJUlw1FOfVYDPa2lN8Vg3uo6Mcf6HgT2cDsR8iDKODCddOaGnwzwIs9FazELa94KWKQ63liil2rIKW4L3GFwFCEgRdhRnitWw39qY4QpOQDFtCyGxlalQy7tV7GnAz6Qrh0XQh214XLdascxng3HtkNoE1xA8aXn+8yqffgQAAAABJRU5ErkJggg==">

查看图标：https://icons8.com/icons