如何将 SVG 嵌入到电子邮件的 HTML 中,以便它在 most/all 电子邮件浏览器中可见?
How can I embed SVG into HTML in an email, so that it's visible in most/all email browsers?
我想在 SVG 中生成图表,并通过电子邮件发送一个 HTML 页面,其中嵌入了这些图表(未存储在服务器上并显示链接图像)。
我试过直接嵌入 SVG,使用 Object 元素,对 SVG 进行序列化和 URI 编码,并将整个字符串指定为 div 上的背景图像。 Outlook 2013 中似乎没有显示任何内容。有什么想法吗?
许多电子邮件客户端不支持 SVG。我见过的最好的指南是 Style Campaign。我保证这是一篇简短的读物(安娜超级聪明!)。
TL;DR:多种技术将在 iOS 邮件客户端和(令人惊讶的)Blackberry 中发挥作用。但是 Android、Outlook 和几乎所有其他桌面和网络邮件客户端都不支持 SVG,需要后备。
更新:“Office 365 的 Microsoft Word、PowerPoint、Outlook 和 Excel Windows、Mac、Android 和 Windows 移动设备 支持在您的文档、演示文稿、电子邮件和工作簿中插入和编辑可缩放矢量图形 (.SVG) 文件。" (Edit SVG images in Microsoft Office 365)
来自 Insert icons in Microsoft Office 指南的 "Insert SVG files" 部分
Insert SVG files
SVG stands for scalable vector graphic file, which means you can
rotate, color, and resize the file without losing image quality.
Office apps, including Word, PowerPoint, Outlook, and Excel, support
inserting and editing SVG files.
Insert an SVG file in Office for Windows: Drag and drop the file from Windows File Explorer into your document.
Insert an SVG file in Office for Mac: Go to Insert > Pictures > Picture from file to insert your SVG images.
Insert an SVG file in Office on Android or Windows Mobile: See Add pictures or videos to a file by using your mobile device for
more information.
一个例子
需要将我们非营利组织的徽标转换为 SVG 以使其看起来正确,所以
查找了一个在线工具(在我的例子中是通过谷歌搜索 "png to svg")
网站生成了它,但如果我不注册就不让我下载。
在开发者控制台中打开 SVG 图片(Chrome:右击图片然后 select "Inspect")
将整个 <svg>
标签复制到一个简单的文本文件中,并使用 .svg
扩展名(来自 this SO thread)保存。
在 Outlook 中,“转到“插入”>“图片”>“来自文件的图片”以插入您的 SVG 图像。”
将文件作为附件导入ProtonMail,发送给自己,然后下载。从来没有遇到过任何问题。
我想在 SVG 中生成图表,并通过电子邮件发送一个 HTML 页面,其中嵌入了这些图表(未存储在服务器上并显示链接图像)。
我试过直接嵌入 SVG,使用 Object 元素,对 SVG 进行序列化和 URI 编码,并将整个字符串指定为 div 上的背景图像。 Outlook 2013 中似乎没有显示任何内容。有什么想法吗?
许多电子邮件客户端不支持 SVG。我见过的最好的指南是 Style Campaign。我保证这是一篇简短的读物(安娜超级聪明!)。
TL;DR:多种技术将在 iOS 邮件客户端和(令人惊讶的)Blackberry 中发挥作用。但是 Android、Outlook 和几乎所有其他桌面和网络邮件客户端都不支持 SVG,需要后备。
更新:“Office 365 的 Microsoft Word、PowerPoint、Outlook 和 Excel Windows、Mac、Android 和 Windows 移动设备 支持在您的文档、演示文稿、电子邮件和工作簿中插入和编辑可缩放矢量图形 (.SVG) 文件。" (Edit SVG images in Microsoft Office 365)
来自 Insert icons in Microsoft Office 指南的 "Insert SVG files" 部分
Insert SVG files
SVG stands for scalable vector graphic file, which means you can rotate, color, and resize the file without losing image quality. Office apps, including Word, PowerPoint, Outlook, and Excel, support inserting and editing SVG files.
Insert an SVG file in Office for Windows: Drag and drop the file from Windows File Explorer into your document.
Insert an SVG file in Office for Mac: Go to Insert > Pictures > Picture from file to insert your SVG images.
Insert an SVG file in Office on Android or Windows Mobile: See Add pictures or videos to a file by using your mobile device for more information.
一个例子
需要将我们非营利组织的徽标转换为 SVG 以使其看起来正确,所以
查找了一个在线工具(在我的例子中是通过谷歌搜索 "png to svg")
网站生成了它,但如果我不注册就不让我下载。
在开发者控制台中打开 SVG 图片(Chrome:右击图片然后 select "Inspect")
将整个
<svg>
标签复制到一个简单的文本文件中,并使用.svg
扩展名(来自 this SO thread)保存。在 Outlook 中,“转到“插入”>“图片”>“来自文件的图片”以插入您的 SVG 图像。”
将文件作为附件导入ProtonMail,发送给自己,然后下载。从来没有遇到过任何问题。