SVG 图像未显示在 html 电子邮件中

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5681562/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:02:12  来源:igfitidea点击:

SVG image not showing in html email

htmlimageemailsvg

提问by James

I've embeded an svg image in to an html email. It displays on iphone and desktop mac mail aplication but is nt showing on my Mobileme web mail. Any ideas why? This is the code

我已将 svg 图像嵌入到 html 电子邮件中。它显示在 iphone 和桌面 Mac 邮件应用程序上,但未显示在我的 Mobileme 网络邮件中。任何想法为什么?这是代码

<object data="http://www.jamesgrubb.co.uk/img/rclogoSmall.svg"
        type="image/svg+xml"
        width="200"
        height="50"
        style="display:block; overflow: hidden;"
        pluginspage="http://www.adobe.com/svg/viewer/install/">
    <img src="http://www.jamesgrubb.co.uk/img/rclogoSmall.svg"
         alt="Red Cloud"
         style="width:200px; height:50px; "/>
</object>

采纳答案by James

Many webmail services sanitize their HTML emails before showing it. Pretty sure it sees the OBJECT element and removes it and whatever it has inside.

许多网络邮件服务会在显示 HTML 电子邮件之前对其进行清理。很确定它会看到 OBJECT 元素并删除它以及它里面的任何东西。

回答by Rosanne de Vries

for others that may be curious about this, we ran an email design test including an SVG image. The results were very mixed.

对于可能对此感到好奇的其他人,我们运行了一个包含 SVG 图像的电子邮件设计测试。结果喜忧参半

While Webkit-powered clients like Apple and iOS Mail breezed through the test, webmail and most desktop email clients didn't seem to want a bar of it.

虽然 Apple 和 iOS Mail 等基于 Webkit 的客户端在测试中轻松通过,但 webmail 和大多数桌面电子邮件客户端似乎并不想要它。

Email client support is definitely something to keep in mind before implementing techniques like this.

在实施这样的技术之前,电子邮件客户端支持绝对是需要牢记的。

回答by Ji?í Doubravsky

Put your SVG under an SVG tag. http://www.kaizou.org/2009/02/svg-inline-in-xhtml/

将您的 SVG 放在 SVG 标签下。http://www.kaizou.org/2009/02/svg-inline-in-xhtml/

回答by Ronak Jain

If you are looking for a hack to allow SVG where Email Client Supports one and to use JPG/PNG where Email client doesn't support SVG example: Gmail; You can use the following hack.

如果您正在寻找一种方法来允许电子邮件客户端支持 SVG 并在电子邮件客户端不支持 SVG 的情况下使用 JPG/PNG 示例:Gmail;您可以使用以下技巧。

https://css-tricks.com/a-guide-on-svg-support-in-email/

https://css-tricks.com/a-guide-on-svg-support-in-email/

Test Results:

检测结果:

https://litmus.com/checklist/public/2d3f533

https://litmus.com/checklist/public/2d3f533