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

Question

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

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

Answer 1

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

TL; DR：各种技术可以在iOS邮件客户端和（令人惊讶的）Blackberry中运行。但Android，Outlook以及几乎所有桌面Webmail电子邮件SVG都不支持SVG，需要回退。

Answer 2

更新：“ 用于Windows，Mac，Android和Windows Mobile上的Office 365的Microsoft Word，PowerPoint，Outlook和Excel 支持在以下位置插入和编辑可缩放矢量图形（.SVG）文件您的文档，演示文稿，电子邮件和工作簿。“（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 File Explorer拖放到文档中。

  

• 在Office for Mac中插入SVG文件：转到“插入”>“图片”>“文件中的图片”以插入SVG图像。

  

• 在Android或Windows Mobile上的Office中插入SVG文件：有关详情，请参见Add pictures or videos to a file by using your mobile device   更多信息。

  

---

一个例子

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

1. 查找了一个在线工具（在我的情况下通过将“ png转换为svg”进行搜索）

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

3. 在开发人员控制台中打开SVG图像（Chrome：右键单击该图像，然后选择“检查”）

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

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

Answer 3

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