如何将 SVG 嵌入到电子邮件的 HTML 中，以便它在大多数/所有电子邮件浏览器中可见？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37753911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I embed SVG into HTML in an email, so that it's visible in most/all email browsers?
提问by ztforster
I want to generate graphs in SVG, and email an HTML page with those graphs embedded in it (not stored on a server and shown with linked images).
我想在 SVG 中生成图形，并通过电子邮件发送一个 HTML 页面，其中嵌入了这些图形（不存储在服务器上并用链接的图像显示）。
I've tried directly embedding the SVG, using the Object element, and serializing and URI encoding the SVG and specifying the whole string as a background image on a div. Nothing seems to display in Outlook 2013. Any ideas?
我尝试直接嵌入 SVG，使用 Object 元素，并对 SVG 进行序列化和 URI 编码，并将整个字符串指定为 div 上的背景图像。Outlook 2013 中似乎没有显示任何内容。有什么想法吗？
回答by Ted Goas
SVG is not supported in many email clients. The best guide I've seen is on Style Campaign. It's a short read that I vouch for (Anna is super smart!).
许多电子邮件客户端不支持 SVG。我见过的最好的指南是关于Style Campaign 的。我保证这是一个简短的阅读（安娜非常聪明！）。
TL;DR: A variety of technique will work in iOS mail clients and (amazingly) Blackberry. But Android, Outlook, and pretty much every desktop webmail email SVG does not support SVG and requires a fallback.
TL;DR：有多种技术适用于 iOS 邮件客户端和（令人惊讶的）黑莓。但是 Android、Outlook 和几乎所有桌面网络邮件电子邮件 SVG 都不支持 SVG，需要回退。
回答by toraritte
Update: "Microsoft Word, PowerPoint, Outlook, and Excel for Office 365 on Windows, Mac, Android and Windows Mobile support inserting and editing scalable vector graphics (.SVG)files in your documents, presentations, emails, and workbooks." (Edit SVG images in Microsoft Office 365)
更新：“适用于 Windows、Mac、Android 和 Windows Mobile 上的 Office 365 的 Microsoft Word、PowerPoint、Outlook 和 Excel支持在您的文档、演示文稿、电子邮件和工作簿中插入和编辑可缩放矢量图形 (.SVG)文件。”（编辑Microsoft Office 365 中的 SVG 图像）
From the "Insert SVG files" section in the Insert icons in Microsoft Officeguide
从Microsoft Office中的插入图标指南中 的“插入 SVG 文件”部分
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 devicefor more information.
插入 SVG 文件
SVG 代表可缩放矢量图形文件，这意味着您可以旋转、着色和调整文件大小而不会降低图像质量。Office 应用程序（包括 Word、PowerPoint、Outlook 和 Excel）支持插入和编辑 SVG 文件。
在 Office for Windows 中插入 SVG 文件：将文件从 Windows 文件资源管理器拖放到文档中。
在 Office for Mac 中插入 SVG 文件：转到“插入”>“图片”>“来自文件的图片”以插入 SVG 图像。
在 Android 或 Windows Mobile 上的 Office 中插入 SVG 文件：有关详细信息，请参阅使用移动设备向文件添加图片或视频。
An example
一个例子
Needed to convert our non-profit's logo into SVG to make it look right, so
需要将我们的非营利组织的徽标转换为 SVG 以使其看起来正确，所以
looked up an online tool (by googling "png to svg" in my case)
The site generated it, but wouldn't let me it download if I won't register.
Opened the SVG image up in the developer console (Chrome: right click on the image and select "Inspect")
copy the entire
<svg>tag into a simple text file and save it with.svgextension (from this SO thread).In Outlook, "Go to Insert > Pictures > Picture from file to insert your SVG images."
查找在线工具（在我的情况下通过谷歌搜索“png to svg”）
该网站生成了它，但如果我不注册，则不会让我下载它。
在开发者控制台中打开 SVG 图像（Chrome：右键单击图像并选择“检查”）
将整个
<svg>标签复制到一个简单的文本文件中并使用.svg扩展名保存（来自这个 SO 线程）。在 Outlook 中，“转到“插入”>“图片”>“文件中的图片”以插入您的 SVG 图像。“
