Basics of SVG in email

Recently I did a bit of research into Scalable Vector Graphics (SVG). I wanted to look into the basics, such as how difficult were they to create, add to an HTML file, make fluid and what kind of email support they have.

 

Why SVG?

This is an SVG zoomed in on an iPad retina display, its sharp as hell. While the SVG file size matches a JPEG at ~18K, the JPEG would swell if we 2x or 4x for retina.

 

SVG in email (zoomed in on iPad)

SVGs are resolution independent so remain sharp on any screen

 

Generating the SVG

I imported the fox.ai file into Illustrator and then cropped the artboard so there wasn’t any excess white space. If you want it exact, select the artwork, then artboard tool, click artwork to ‘refine artboard to artwork’. Then file/save as/select SVG from drop-down which brings up an ‘SVG Options’ module.

 

SVG in email Illustrator settings

Illustrator SVG options module, note the ‘More Options’ button top right.

 

SVG in email Illustrator settings

Click ‘More Options’ to set the number of decimal points in your code ranging from 1-7.

 

Decimal places were set to 3 by default, so I tried setting it to one and the file size didn’t budge. Though when I saved it out at 7 it went up from 18K to 21K. Here’s the SVGs for 1, 3 and 7. For example you’ll see 316.4 (one) 316.483 (three) and 316.4838867 (seven), the more information the heavier the file size.

You can also use an SVG optimizer, this one by Peter Collingridge gives you the option of zero decimal points (won’t allow that in Illustrator), and drops the file size down to 16K.

SVG in email Illustrator settings

Left SVG with seven decimal points, and right zero.

 

Adding the SVG to HTML

We did most of our initial testing by adding the SVG directly into the body of our HTML, and sending via Blat. The couple of ESPs I tried didn’t support SVG unless converted to base64, so it might be the only way to go. I did notice converting to base64 adds ~1/3 to the file size, and Graeme felt it was slower to draw. Some techniques work in the browser but not the iOS email client, we finally settled on two options. Both methods use data URI’s to embed a base64 encoded SVG within the HTML code.

 

Background image

With the background image technique the SVG is embedded in the CSS in the head of the page:

#svg-element { background: url(data:image/svg+xml;base64,[data]); }

View a demo here, the CSS can also be inlined.

The downside of using background image is that some email clients don’t support it. Also background images don’t scale and therefore won’t incorporate well into a responsive template. Though that’s not an issue if you’re just using small logos and icons. Also I had problems sending it via my ESP, even though it was base64 encoded it still wouldn’t upload (tested both inline and in the head). It does work on iOS when sending via Blat, so I left this technique in as support could vary by ESP.

 

Foreground image

The foreground image technique embeds the SVG within an image tag in the body of the HTML:

<img src=”data:image/svg+xml;base64,[data]”>

View a demo here.

This is the only solution we found that we could send via our ESP and scales, so we’re going with it.

 

Support

We tested the base64 foreground technique, and support was far better than I expected. Not only do we have desktop MacMail…

SVG working in Mac Mail

But also BB7.1 and BBZ10. Though the Z10 doesn’t appear to like gradients. We tested SVGs without and they came in fine (need to do more research as a few variables in play). We also sent a test with the SVG in the body of the email - not Base64 encoded - and it wouldn’t load on BB7.1 nor would the background base64 test. So there’s clearly different levels of support for each technique.

SVG on BB

Finally Android 4.0 and above in the native client, and Kindle Fire HDs. So quite a decent sweep, running along somewhat similar lines to media query support.

SVG on Droid

 

The full list is below, you can also view my QA pdf for more details and screenshots.

SVG support
iPhone native (iOS 4.3, 5.1, 6.1 and 7.0) Yes
iPhone Mailbox app No
iPhone Gmail app (0.25% of opens as of June 2013) No
iPhone Sparrow app Yes
iPhone Evomail app Yes
iPhone Boxer app Yes
iPhone Yahoo! Mail app No
iPad full-sized native Yes
iPad mini native Yes
iPad Birdseye Mail Yes
iPad Incredimail Yes
iPod Touch native Yes
Android 2.1 Eclair native client No
Android 2.2 Froyo native client No
Android 2.3 Gingerbread native client No
Android 4.0 Ice Creme Sandwich native client Yes
Android 4.1, 4.2 and 4.3 Jelly bean native client Yes
Android Outlook.com app ? txt vr.
Android Gmail app No
Android Evomail app Yes
Android Yahoo Mail app  2.0 No
Original Kindle Fire native client No
Kindle Fire HD (New vr. of Silk) native client Yes
Windows Phone 7 No
Windows Phone 7.5 No
Microsoft Surface tablet (Outlook.com/Hotmail) No
Palm webOS 4.5 No
BlackBerry OS 7 Yes
BlackBerry Z10 Yes
DESKTOP (MacMail only client I tested which worked) Yes

 

Fluid SVG

One of the big advantages of an SVG is its scalable while still retaining its sharpness. You can see in the code that it’s easy to make fluid, just resize your browser window down and view source. You would have to use the foreground image technique here.

 

Linking SVG

Here’s a demo with a URL added to the SVG using the foreground image method. You would treat it like any other image, so links and alt text are still supported.

 

Background images

You can add a background image to an SVG, here’s our rough test.

SVG in email over bg img

 

Masks and filters

Campaign Monitor have a post which demos SVG masks, and you can also use a bunch of  filters like blur. Here we grouped together the tail, torso and head polygons, and applied two different levels of blur. You can see in the blur demo, that the tail is less blurred than the torso and the head is left alone.

 

SVG blur filter in email

Support for masks and filters is varied across Android, view blurred SVG.

 

You increase amount of blur by setting the standard deviation, the bigger the number the bigger the blur radius. We just did this roughly as it’s not a well organized mesh, with the polygons all out of order. You can probably set up a workflow in Illustrator that groups polygons beforehand. After seeing the gradients knocked out in BBZ10, I thought I’d test support for SVG filters. It seems while iOS supports blur (above left), Android 4.0 and 4.1 doesn’t (right).

 

Fallback

Ideally you’d fallback to an image wherever SVG isn’t supported. First we tried this method - test HTML - which has an external URL and is JavaScript free. While iOS received the SVG, the fallback didn’t come in anywhere. Android 2.3, desktop Gmail, Yahoo! Mail, Outlook.com and Outlook 2007 were all blank. Android 4.0 didn’t even get the SVG via the external URL, it was also blank.

 

SVG on iOS and Droid with fallback

SVG on iOS (left) and Android 2.3 (right), sent via my ESP.

 

We went on to test a few other techniques and couldn’t find a fallback solution that’s JavaScript free, if you have better luck let us know. Another concern is whether the fallback image is downloaded on mobile along with the SVG, as you then loose any file size advantage.

UpdateMark Robbins had a couple of SVG fallback ideas, you can see my final QA here. We went a few rounds until we found a solid solution (at least on the devices in our test lab). Final code is here, let me know if you come across any problems. Cheers Mark!

Update, Update: Here’s an email we sent out with an SVG in you can view source…

 

iOS only

One option is to use media queries to corral iOS, using the iPhone and iPads width and height properties. Though it seems a shame to settle for iOS when SVG support is much broader. I’m less bothered by iOS pandering than the extra work involved, for logos it may be easier to just 2x. Though the effort would be worth it for something special, like a big hero SVG.

 

Viable?

(yes - See update in fallback section)

iOS does make up the bulk of mobile email opens, so it just depends on your stats. Some of our clients took an ‘iOS first’ approach to email dev last year, putting resources towards techniques that only work on iPhones and iPads. If viewed as enhancements there’s many new possibilities. Though I’m still hoping for an image fallback solution for SVGs. I also expect we’ll see SVG animations creeping into emails this year. Going from static to animated is a bit of a nightmare, but I’ll attempt to explore that next.

Here’s part two SVG Animation and part three 3D to SVG