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">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 . 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 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 Gmail and a few other 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">
<!-- 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:
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 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. You can check out a public Litmus test here which showing all the methods in a single email.
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.
A Guide for SVG Support in Email is a post from CSS-Tricks
