A Guide for SVG Support in Email

We’ve talked about SVG quite a bit here on CSS-Tricks, but one area we haven’t quite touched on is email. Now that browser support for SVG is all in the green, it would be easy to assume that we can start using SVG everywhere. However, if you’ve worked with email before, you may know that it often follows way behind the web as far as feature support. You know, kinda the way California looks at North Dakota with trends: just a few years behind. :)

This article takes a deep dive into four different ways SVG can be used, and compares support for those methods across several of the most popular email applications. Let’s see where we get the most support.


SVG as Image Tag

Using SVG as a straight-up <img> tag is like placing any other image file onto a screen, except we’re referencing an SVG file instead something like a JPG or PNG:

<img src="my-image.svg">

Here’s the support for this technique:

AOL Web Outlook 2013 Outlook
.com
Yahoo! Mail (OSX) Mail (iOS) Gmail Gmail (iOS) Gmail (Android) Android
Yes No Yes Yes Yes Yes No No Yes No

Total support: 60%

SVG as Inline HTML

In this test, we’re plucking the code for the SVG file right out of Illustrator and plopping it directly into the email’s HTML:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-227 241 225.3 224.1" style="enable-background:new -227 241 225.3 224.1;" xml:space="preserve">
    <path class="dice-1" d="M-132,241h-72.3c-12.4,0-22.6,10.2-22.6,22.6V336c0,12.4,10.2,22.6,22.6,22.6h72.3c12.4,0,22.6-10.2,22.6-22.6
    v-72.3C-109.4,251.2-119.6,241-132,241z M-195.3,340.5c-7.5,0-13.6-6.1-13.6-13.6c0-7.5,6.1-13.6,13.6-13.6
    c7.5,0,13.6,6.1,13.6,13.6C-181.8,334.4-187.9,340.5-195.3,340.5z M-195.3,286.2c-7.5,0-13.6-6.1-13.6-13.6
    c0-7.5,6.1-13.6,13.6-13.6c7.5,0,13.6,6.1,13.6,13.6C-181.8,280.1-187.9,286.2-195.3,286.2z M-168.2,313.3
    c-7.5,0-13.6-6.1-13.6-13.6c0-7.5,6.1-13.6,13.6-13.6s13.6,6.1,13.6,13.6C-154.7,307.3-160.7,313.3-168.2,313.3z M-141.1,340.5
    c-7.5,0-13.6-6.1-13.6-13.6c0-7.5,6.1-13.6,13.6-13.6c7.5,0,13.6,6.1,13.6,13.6C-127.5,334.4-133.6,340.5-141.1,340.5z
     M-141.1,286.2c-7.5,0-13.6-6.1-13.6-13.6c0-7.5,6.1-13.6,13.6-13.6c7.5,0,13.6,6.1,13.6,13.6C-127.5,280.1-133.6,286.2-141.1,286.2
    z"/>
    <path class="dice-2" d="M-24.3,347.5h-72.3c-12.4,0-22.6,10.2-22.6,22.6v72.3c0,12.4,10.2,22.6,22.6,22.6h72.3
    c12.4,0,22.6-10.2,22.6-22.6v-72.3C-1.7,357.7-11.9,347.5-24.3,347.5z M-87.6,447c-7.5,0-13.6-6.1-13.6-13.6
    c0-7.5,6.1-13.6,13.6-13.6c7.5,0,13.6,6.1,13.6,13.6C-74.1,441-80.1,447-87.6,447z M-60.5,419.9c-7.5,0-13.6-6.1-13.6-13.6
    c0-7.5,6.1-13.6,13.6-13.6s13.6,6.1,13.6,13.6C-46.9,413.8-53,419.9-60.5,419.9z M-33.4,392.8c-7.5,0-13.6-6.1-13.6-13.6
    s6.1-13.6,13.6-13.6s13.6,6.1,13.6,13.6S-25.9,392.8-33.4,392.8z"/>
</svg>

The support is a lot less than I expected:

AOL Web Outlook 2013 Outlook.com Yahoo! Mail (OSX) Mail (iOS) Gmail Gmail (iOS) Gmail (Android) Android
No No No No Yes Yes No No No Yes*

*Overflows the container

Total support: 25% (counting Android as partial support)

You might have noticed that I assigned classnames for each path. 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.

fill

Mail (OSX) Mail (iOS) Android
Yes Yes Yes

stroke

Mail (OSX) Mail (iOS) Android
Yes Yes Yes

SVG as CSS background Image

We can use SVG as a background image in CSS:

.my-element {
  background-image: url("my-image.svg");
  background-repeat: no-repeat;
}
AOL Web Outlook 2013 Outlook.com Yahoo! Mail (OSX) Mail (iOS) Gmail Gmail (iOS) Gmail (Android) Android
Yes No No Yes Yes Yes No No No No

Total support: 40%

Note that some email applications are known to strip CSS from the document <head>. In these cases, it is a best practice to inline our styles in addition to including them in the <head>.

Also, CSS backgrounds are a bit unpredictable if we're dealing with a responsive design. Keeping the width and height proportional to each other would be tricky, and probably more hassle than it's worth.

SVG as Object Embed

Embedding SVG as an <object> is a lot like embedding a media file, like audio or video. The benefit—aside from retaining some styling control with CSS—is that a fallback image can be set where SVG is not supported:

<object style="width:100%;" type="image/svg+xml" data="my-image.svg">
  <img src="my-image.jpg">
 </object>
AOL Web Outlook 2013 Outlook.com Yahoo! Mail (OSX) Mail (iOS) Gmail Gmail (iOS) Gmail (Android) Android
No No Yes* Yes* Yes Yes No No Yes Yes

* with fallback
overflows the container

Total support: 55% (with partial support for Mail OSX)

Image Tag with CSS Hack

The results here aren’t very encouraging. I mean, the the best support is 60% and that's kinda crappy. But, what if we tried combining a couple of different techniques to get something provides us better support?

Here’s the trick. First, we’ll add one image tag for the SVG and one for a backup JPG:

<!-- Image: SVG -->
<img src="my-image.svg">
<!-- Image: JPG -->
<img src="my-image.jpg">

If we were to stay with this, we would have a situation where some email applications display two images and others display one with a broken image symbol. Yuck.

Let’s hide that JPG for the email applications that do support SVG. No, Modernizr does not work for email, but we do know that a few applications ignore any CSS that is in the document <head>. We can use that to our advantage by adding a classname to the JPG image element and hiding it with CSS:

<!-- Image: SVG -->
<img src="my-image.svg">
<!-- Image: JPG -->
<img class="no-showy" src="my-image.jpg">
/* Hide this everywhere, except for those that can’t read this code */
.no-showy {
  display: none;
}

Now we’re on a roll! We have accomplished the feat of hiding the JPG in all email applications, except Gmail. If we stop here, however, here’s how Gmail renders the code:

That darn broken image!

Ack, so close. Now we need to hide that broken image tag where the SVG should go. Let’s do a couple of things:

  • Add a height and width of zero to the SVG
  • Add a classname to the SVG that resizes it

In other words:

<!-- Image: SVG -->
<img class="showy" width="0" height="0" src="my-image.svg">
<!-- Image: JPG -->
<img class="no-showy" src="my-image.jpg">

Removing the width and height of the SVG inline has the same effect as hiding it. Then, we use the CSS document <head> hack by adding a class that changes those dimensions back to a full-size image for the email applications that support SVG:

/* Resize an element that has a width and height of zero to full size */
.showy {
  height: 100% !important;
  width: 100% !important;
}

/* Hide this everywhere, except for those that can’t read this code */
.no-showy {
  display: none;
}

Let’s pull it all together:

/* Resize an element that has a width and height of zero to full size */
.showy {
  height: 100% !important;
  width: 100% !important;
}
<!-- Image: SVG -->
<img class="showy" width="0" height="0" src="my-image.svg">
<!-- Image: JPG -->
<img class="no-showy" src="my-image.jpg">

Our support starts to look a heck of a lot better:

AOL Web Outlook 2013 Outlook.com Yahoo! Mail (OSX) Mail (iOS) Gmail Gmail (iOS) Gmail (Android) Android
Yes* Yes Yes* Yes* Yes* Yes* Yes Yes Yes Yes*

* SVG
JPG

Holy crap, we’re at 100%! Well, close anyway.

Is it all SVG? No, but it is nice to be able to say we can use SVG with a responsible fallback.

My biggest takeaway...

...is that email is still in the Wild West of front-end development. I would personally feel like using SVG is a gamble, but knowing there is a workaround is reassuring, even if it does mean an extra layer of work.

That said, knowing your audience is likely the determining factor for whether SVG can and should be used in email. For example, a developer of iOS apps who knows that customers consume email on an OSX or iOS device might feel really good about using SVG. Many email marketing providers (like MailChimp and Campaign Monitor) make this information easy to find with analytics. Campaign Monitor also has a pretty handy report on the popularity and market share of email applications that is worth checking out.