Getting SVG images to work across email clients
There seems to have been a lot of talk recently about SVG in email. Anna Yeaman has done a couple of particularly good articles on the subject.
I’m going to skip over a few things for now but I may flesh out this article at a later date. I’m going to assume you have already created your SVG and have your server configured to display SVG images (that bit tripped me up for a while).
Including the SVG
There are a number of ways to do this but I’m going to stick with the simplest for now and do this just the same as any other image.
<img src="image.svg" />Fallback
Quite predictably SVG’s don’t work across all email clients. However after running my initial test in Litmus I noticed that SVG support is pretty closely related to webkit support. So I’m going to exploit that and swap the images for webkit clients. I’ve previously used similar targeting for CSS animation or HTML5 video.
First off we include both images and hide the SVG (quick credit here for Fresh inbox)
<div class="no-webkit">
<img src="image.png"/>
</div>
<!--[if !mso 9]><!-->
<div class="is-webkit" style="display:none; max-height:0px; overflow:hidden;">
<img src="image.svg" />
</div>
<!--<![endif]-->
Then inside a media query targeting webkit we set the SVG to show and the PNG to hide.
@media all and (-webkit-min-device-pixel-ratio:1) {
.is-webkit{
display: block !important;
max-height: none !important;
}
[class="no-webkit"]{
display: none !important;
}
}
I should point out we are losing out on a couple of email clients that do support SVG but aren’t webkit (some versions of Thunderbird, AOL and Yahoo).
There is one case I’ve found that does run on webkit but doesn’t support SVG, that’s older versions of Android. There is a clever little inline javascript trick that works here.
<img src="image.svg" onerror="this.onerror=null; this.src='image.png'"/>
This basically says if the image.svg image doesn’t load, change the src to image.png I’ve use this method on the web as it’s so simple and works great but on email the support is very limited.
N.BThis work around goes for most of the Android 2 devices I’ve tried but it’s not 100%
And that’s it. Here is the full code I used
If you’re interested in SVG in email I advise having a look at Anna Yeaman’s articles
http://stylecampaign.com/blog/2014/01/basics-of-svg-in-email/