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

ztf*_*ter 23 html svg html-email

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

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

Ted*_*oas 31

许多电子邮件客户端不支持SVG.我见过的最好的指南是Style Campaign.这是我保证的简短阅读(安娜非常聪明!).

TL; DR:各种技术将在iOS邮件客户端和(令人惊讶的)Blackberry中运行.但Android,Outlook和几乎所有桌面Webmail电子邮件SVG都不支持SVG并需要回退.

  • @GeorgeVasilopoulos 不幸的是没有重大更新。电子邮件客户端不会像浏览器那样更新,并且支持与 2016 年基本相同。 (14认同)
  • 鉴于此回复已有 4 年历史,我们能更新一下吗? (4认同)
  • 非常感谢@Ted,我真的很感激。 (2认同)
  • @deweydb 不幸的是,电子邮件客户端的存在时间比 Web 浏览器更长,并且到 2022 年对嵌入式 SVG 的支持仍然很差。[这里有更多更新的统计数据](https://www.caniemail.com/features/html-svg/)。 (2认同)

tor*_*tte 5

更新:“适用于 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 图像。

  • 这个答案与问题无关。 (6认同)