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)


Generating the SVG

I imported the file into Illustrator and then cropped the artboard, so there wasn’t 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. These are the settings I used, click OK and it’s saved out as an SVG.

SVG in email Illustrator settings

If you click the ‘More Options’ button you can set the number of decimal points in your code ranging from 1-7.

SVG in email Illustrator settings

It was 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.

Left has seven decimal points, and right zero.

SVG in email Illustrator settings


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. Though the couple of ESPs I tried didn’t support SVGs, so converting to base64 code 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.



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.


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

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



Ideally you’d fallback to an image wherever SVG isn’t supported, but many of these techniques rely on JavaScript.

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, 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 (left) and Android 2.3 (right), sent via my ESP.

SVG on iOS and Droid with fallback

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

Update: Mark Robbins -  @M_J_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!


iOS only

One option is to use media queries to corral iOS, using the iPhone and iPads width and height properties. We’ve done this for HTML5 video as Android, BB and WP don’t play nice. 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’s easier to just 2x res. Though the effort would be worth it for something special, like a big hero SVG.



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

Update here’s part two SVG Animation and part three 3D to SVG


12 Responses to “Basics of SVG in email”

  • Christopher
    March 11th, 2014 02:53


    Nice write up, though is there a particular reason why you focused so much of your testing on mobile devices? There is incredible variation in the feature support of desktop email clients, it really doesn’t make sense to assume that ‘the desktop’ will be catered for because one client supports SVG…

  • Anna Yeaman
    March 11th, 2014 08:44

    Hi Christopher,

    I tested on a range of desktop and webmail clients in a few different browsers (there’s a more in-depth QA PDF you can download in this post just above the support chart) but found Mac Mail was the only one that supported this particular test. I also ran a Litmus test as a backup.

    I noticed a couple more desktop clients support SVG like AOL under Chrome, depending which method you use. I’m all for more desktop support if I can get it, though most SVG support seems to be mobile based.

  • Aidan Feldman
    April 15th, 2014 17:56

    Do “ tags fall under one of the categories you mentioned, or is that something that needs to be tested separately? Would really like to see a comparison table that has all the QA results for each type of usage by device…. style.

  • Paul
    January 20th, 2015 08:06


    Firstly thank you for the extensive & informative breakdown of using SVGs in e-mail. Very much appreciated.

    I’m using SVGs in an e-mail signature, and all is working great in iOS, except the final SVG icon (out of 4) seems to keep disappearing on the MacMail desktop client. Have you come across this at all? If so, any advice or comment would be a great help.

    Thanks again


  • Anna Yeaman
    February 6th, 2015 10:48

    Cheers Paul,

    hard to say without seeing the code, though we’ve not seen an instance of this happening I’m afraid.

  • Beni Paskin-Cherniavsky
    March 30th, 2015 05:04

    I’ve just come across an svg>switch>foreignObject>img fallback technique from 2009:

    This is not a red circle

    A quick test:
    gave near-perfect results: SVG shows in a lot of places, fallback PNG (or any other html!) everywhere else except Lotus Notes <8 (which didn’t support png), BlackBerry (looks like didn’t support png but didn’t dig into that) and one bizzare android (svg in landscape, broken in portrait? need to test more)

  • Anna Yeaman
    March 31st, 2015 18:06

    Cheers Beni I’ll check this out!

  • John Cadengo
    April 13th, 2015 09:51

    Hi, thanks for the article!

    Does embedding svgs in the style run into the same problems as embedding images where the email client blocks images from non-trusted sources?

  • Anna Yeaman
    April 14th, 2015 17:09

    Hi John,

    our animated Fox SVG displayed instantly with images off, at least on the few Android’s I just checked on. So doesn’t appear to get blocked or throw up any ’sure you want to download that’ type of messages at least where SVGs are supported.

  • Chris
    April 22nd, 2015 05:24

    We are having big problems with dispalying an SVG signature capture in a email using Outlook. Using a web based client the signature appears but in Outlook nothing. Any ideas on what we need to do.


  • Anna Yeaman
    April 22nd, 2015 15:59

    Hi Chris,

    desktop Outlook doesn’t support SVGs, so you need to add a fallback image. That image then gets displayed in Outlook and anywhere else SVGs aren’t supported.

  • Beni Paskin-Cherniavsky
    June 1st, 2015 00:05

    Oops, I gave the wrong link (mixed up with my attempts at MathML fallbacks from the same time)
    Here are my SVG tests:

    The main limitation of the technique is that the fallback would show any text appearing inside the SVG.
    It only works for text-free SVG that consists only of tags.
    I expect this is solvable but hasn’t had time to experiment more…
    (SVG has several mechanisms for reusing elements written in one place elsewhere, so it should be possible to make the text display:none for fallback clients but still visible for clients that understand SVG. I did one attempt that worked in browsers but failed in email.)


Leave a comment: