DJ3
SVG in emails
I did a quick search in discussions and nothing came up for svg support in emails. I found a link with a very nice support graph. In that article the writer does a very nice job recording the down falls and fall back testing, amoung other very good to know facts.
I wanted to open it up in Litmus discussions to see two things.
1. Has anyone in this community had any success using SVG's in emails?
2. Have you found any documentation for Email clients future support?
It would be nice to start utilizing these very scalable, retina-ready images!
Thanks!
Hi David
I had some success with SVG recently as a Background progressive enhancement. Reason for going SVG was to get a smooth retina diagonal background
.g1 { background: #f0efee url('data:image/svg+xml,\ <svg class="triangle" xmlns="http://www.w3.org/2000/svg" width="650" height="300" >\ <polygon points="0,0 650,0 0,300" width="650" height="300" />\ </svg>'); background-repeat: no-repeat; background-size: contain; }Code was a lot lighter than using the CSS gradient, a plus to this was SVG was pulling through when images was off.
https://litmus.com/checklist/public/0889821#iphone6s
Hi David.
I've done some work with SVG in email, I wrote about it on my site. It's a bit of a long winded work around but it works on everything I've tested and Anna from Style campaign ran it through her device lab too.
Not sure on future support but I'd image it's only going to grow as SVG's gain popularity on the web.
Actually here's a newer version of the code
http://codepen.io/M_J_Robbins/pen/AGnab
I need to update my site to include that.
Thanks for the reply. I think I got to that "style campaign" link through your site actually haha. I will have to try out your work around though, its pretty clever.
haha cool cheers. Let us know how you get on and if you run into any issues.
Hi David, interesting idea my personal opinion on the matter is that there is no benefit to having an SVG in an email. SVG is great for web at the moment but the time/effort...and headaches...it would cause doesn't seem to outweigh the pros. I mean to use scalable images in emails would presume you would adopt a scalable template?
Yeah, so here is where I ran into the use case. I developed on a responsive template and in this email I had a little calendar icon next to "+ Google Cal" button as one image. For desktop they were 200px wide. And for mobile I want them to scale to be 100%. Now, even as a max quality .jpg, it still looked artifacted in a mobile sized browser. Let alone on my Iphone. I immediately thought about Svg's would be great right now instead of saving out a large jpg.
You are totally right about the pros and cons though. Right now, as Mark Robbins pointed this out, there are many hoops to jump though to get SVGs to work cross all email clients. It would be cool to have that tool in the tool box though.
The file size of a PNG and an SVG can seem like a small difference, however, if you send an email banner to 5,000 users in your company, you could save some crunch time. And in theory, the email would serve up and open faster.
I'm curious if there is any security concerns with email clients.