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
• SVG as Inline HTML
• SVG as CSS Background Image
• SVG as Object Embed
• Bonus: SVG with JPG Fallback

---

SVG as Image Tag

Using SVG as a straight-up 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" alt="A pair of flat black dice, one on 5 and one on 3">

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*

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

You might have noticed that I assigned class names 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 . In these cases, it is a best practice to inline our styles in addition to including them in the .

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:

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

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

Image Tag with CSS Hack

Update: The following hack was intended to exploit Gmail's lack of support for CSS contained in the document but that is no longer the case as of September 2016. The support table at the end of the article has also been updated to reflect this change.

Update 2 (Dec. 7, 2022): Both the <img> and <picture> elements support the srcset attribute, making it possible to define image fallbacks without the CSS hiding method in the following section. In other words, we can specify multiple files in <img> and let the email client pick its poison:

<img src="my-image.jpg" 
     alt="A pair of flat black dice, one on 5 and one on 3" 
     srcset="my-image.svg"
/>

Thanks to Viktor Mukhachev for the tip!

---

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" alt="A pair of flat black dice, one on 5 and one on 3" role="img">
<!-- Image: JPG -->
<img src="my-image.jpg" alt="A pair of flat black dice, one on 5 and one on 3">

That role="img"> is there to account for a bug that prevents VoiceOver to properly identify SVG as an image, as explained over at MDN.

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 . 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" alt="A pair of flat black dice, one on 5 and one on 3" role="img">
<!-- Image: JPG -->
<img class="no-showy" src="my-image.jpg" alt="A pair of flat black dice, one on 5 and one on 3">

/* 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:

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" src="my-image.svg" width="0" height="0" alt="A pair of flat black dice, one on 5 and one on 3" role="img">
<!-- Image: JPG -->
<img class="no-showy" src="my-image.jpg" alt="A pair of flat black dice, one on 5 and one on 3">  

Removing the width and height of the SVG inline has the same effect as hiding it. Then, we use the CSS document 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;
}

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	No	No	No	Yes

So, so, so close! We have full support for many clients, a responsible fallback for another, and unfortunately no support in Gmail which is a significant slice of market share.

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, particularly if it's known that your subscribers rely on Gmail.

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.