Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG image not showing in html email

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>
like image 792
James Avatar asked Apr 15 '11 19:04

James


People also ask

Why is my SVG not showing up in HTML?

If you are trying to use SVG like <img src="image. svg"> or as a CSS background-image , and the file is linked to correctly and everything seems right, but the browser isn't displaying it, it might be because your server is serving it with an incorrect content-type.

Can I use SVG in HTML email?

SVG as Inline HTML If you were hoping the CSS properties for SVG are also supported for those email clients that recognize inline SVG, well, you're in luck. They are, across the board.

Do SVG files work in emails?

As there is no native support to embed SVGs in an email, it is better to use . PNG files as signatures as they are supported by all email operators.

How do I show SVG in HTML?

SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document. If you did everything correctly, your webpage should look exactly like the demo below.


1 Answers

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.

like image 162
Rosanne de Vries Avatar answered Nov 03 '22 00:11

Rosanne de Vries