SVG image not showing in html email

2020-07-05 05:56发布

问题:

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

<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>

回答1:

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.



回答2:

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

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.

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



回答3:

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



回答4:

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.

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

Test Results:

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