{"id":235872,"date":"2015-12-22T07:26:04","date_gmt":"2015-12-22T14:26:04","guid":{"rendered":"http:\/\/css-tricks.com\/?p=235872"},"modified":"2022-12-07T11:29:49","modified_gmt":"2022-12-07T19:29:49","slug":"a-guide-on-svg-support-in-email","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/a-guide-on-svg-support-in-email\/","title":{"rendered":"A Guide for SVG Support in Email"},"content":{"rendered":"\n<p>We\u2019ve <a href=\"https:\/\/css-tricks.com\/tag\/svg\/\">talked about SVG quite a bit<\/a> here on CSS-Tricks, but one area we haven\u2019t quite touched on is email. Now that <a href=\"http:\/\/caniuse.com\/#search=svg\" rel=\"noopener\">browser support for SVG is all in the green<\/a>, it would be easy to assume that we can start using SVG everywhere. However, if you\u2019ve 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. :)<\/p>\n\n\n\n<p>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\u2019s see where we get the most support.<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul>\n<li><a href=\"#svg-email-img\">SVG as Image Tag<\/a><\/li>\n\n\n\n<li><a href=\"#svg-email-inline\">SVG as Inline HTML<\/a><\/li>\n\n\n\n<li><a href=\"#svg-email-bg-image\">SVG as CSS Background Image<\/a><\/li>\n\n\n\n<li><a href=\"#svg-email-object-embed\">SVG as Object Embed<\/a><\/li>\n\n\n\n<li><a href=\"#svg-email-bonus\"><strong>Bonus:<\/strong> SVG with JPG Fallback<\/a><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<h3 class=\"wp-block-heading\" id=\"svg-email-img\">SVG as Image Tag<\/h3>\n\n\n<p>Using SVG as a straight-up <code><img><\/code> tag is like placing any other image file onto a screen, except we\u2019re referencing an SVG file instead something like a JPG or PNG:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;img src=\"my-image.svg\" alt=\"A pair of flat black dice, one on 5 and one on 3\"><\/code><\/pre>\n\n\n\n<p>Here\u2019s the support for this technique:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>AOL Web<\/th><th>Outlook 2013<\/th><th>Outlook<br>.com<\/th><th>Yahoo!<\/th><th>Mail (OSX)<\/th><th>Mail (iOS)<\/th><th>Gmail<\/th><th>Gmail (iOS)<\/th><th>Gmail (Android)<\/th><th>Android<\/th><\/tr><\/thead><tbody><tr><td>Yes<\/td><td>No<\/td><td>Yes<\/td><td>Yes<\/td><td>Yes<\/td><td>Yes<\/td><td>No<\/td><td>No<\/td><td>Yes<\/td><td>No<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Total support:<\/strong> 60%<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"svg-email-inline\">SVG as Inline HTML<\/h3>\n\n\n<p>In this test, we\u2019re plucking the code for the SVG file right out of Illustrator and plopping it directly into the email\u2019s HTML:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;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\">\n  &lt;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\n    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\n    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\n    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\n    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\n    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\n     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\n    z\"\/>\n  &lt;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\n    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\n    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\n    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\n    s6.1-13.6,13.6-13.6s13.6,6.1,13.6,13.6S-25.9,392.8-33.4,392.8z\"\/>\n&lt;\/svg><\/code><\/pre>\n\n\n\n<p>The support is a lot less than I expected:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>AOL Web<\/th><th>Outlook 2013<\/th><th>Outlook.com<\/th><th>Yahoo!<\/th><th>Mail (OSX)<\/th><th>Mail (iOS)<\/th><th>Gmail<\/th><th>Gmail (iOS)<\/th><th>Gmail (Android)<\/th><th>Android<\/th><\/tr><\/thead><tbody><tr><td>No<\/td><td>No<\/td><td>No<\/td><td>No<\/td><td>Yes<\/td><td>Yes<\/td><td>No<\/td><td>No<\/td><td>No<\/td><td>Yes<sup>*<\/sup><\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\"><sup>*<\/sup>Overflows the container<\/figcaption><\/figure>\n\n\n\n<p><strong>Total support:<\/strong> 25% (counting Android as partial support)<\/p>\n\n\n\n<p>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\u2019re in luck. They are, across the board.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"fill\"><code>fill<\/code><\/h4>\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Mail (OSX)<\/th><th>Mail (iOS)<\/th><th>Android<\/th><\/tr><\/thead><tbody><tr><td>Yes<\/td><td>Yes<\/td><td>Yes<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"stroke\"><code>stroke<\/code><\/h4>\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Mail (OSX)<\/th><th>Mail (iOS)<\/th><th>Android<\/th><\/tr><\/thead><tbody><tr><td>Yes<\/td><td>Yes<\/td><td>Yes<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"svg-email-bg-image\">SVG as CSS background Image<\/h3>\n\n\n<p>We can use SVG as a background image in CSS:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.my-element {\n  background-image: url(\"my-image.svg\");\n  background-repeat: no-repeat;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>AOL Web<\/th><th>Outlook 2013<\/th><th>Outlook.com<\/th><th>Yahoo!<\/th><th>Mail (OSX)<\/th><th>Mail (iOS)<\/th><th>Gmail<\/th><th>Gmail (iOS)<\/th><th>Gmail (Android)<\/th><th>Android<\/th><\/tr><\/thead><tbody><tr><td>Yes<\/td><td>No<\/td><td>No<\/td><td>Yes<\/td><td>Yes<\/td><td>Yes<\/td><td>No<\/td><td>No<\/td><td>No<\/td><td>No<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Total support:<\/strong> 40%<\/p>\n\n\n\n<p>Note that some email applications are known to strip CSS from the document <code><\/code>. In these cases, it is a best practice to inline our styles in addition to including them in the <code><\/code>.<\/p>\n\n\n\n<p>Also, CSS backgrounds are a bit unpredictable if we&#8217;re dealing with a responsive design. Keeping the width and height proportional to each other would be tricky, and probably more hassle than it&#8217;s worth.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"svg-email-object-embed\">SVG as Object Embed<\/h3>\n\n\n<p>Embedding SVG as an <code>&lt;object><\/code> is a lot like embedding a media file, like audio or video. The benefit\u2014aside from retaining some styling control with CSS\u2014is that a fallback image can be set where SVG is not supported:<code><object width=\"300\" height=\"150\"><pre rel=\"HTML\" class=\"  language-markup\"><\/object><\/code><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>AOL Web<\/th><th>Outlook 2013<\/th><th>Outlook.com<\/th><th>Yahoo!<\/th><th>Mail (OSX)<\/th><th>Mail (iOS)<\/th><th>Gmail<\/th><th>Gmail (iOS)<\/th><th>Gmail (Android)<\/th><th>Android<\/th><\/tr><\/thead><tbody><tr><td>No<\/td><td>No<\/td><td>Yes<sup>*<\/sup><\/td><td>Yes<sup>*<\/sup><\/td><td>Yes<sup>\u2020<\/sup><\/td><td>Yes<\/td><td>No<\/td><td>No<\/td><td>Yes<\/td><td>Yes<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\"><sup>*<\/sup> with fallback<br><sup>\u2020<\/sup> overflows the container<\/figcaption><\/figure>\n\n\n\n<p><strong>Total support:<\/strong> 55% (with partial support for Mail OSX)<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"svg-email-bonus\">Image Tag with CSS Hack<\/h3>\n\n\n<p class=\"is-style-default\"><em class=\"explanation\"><strong>Update:<\/strong> The following hack was intended to exploit Gmail's lack of support for CSS contained in the document  but that is <a href=\"https:\/\/litmus.com\/blog\/gmail-to-support-responsive-email-design\" rel=\"noopener\">no longer the case<\/a> as of September 2016. The support table at the end of the article has also been updated to reflect this change.<\/em><\/p>\n\n\n\n<p><em><strong>Update 2 (Dec. 7, 2022): <\/strong>Both the <code>&lt;img><\/code> and <code>&lt;picture><\/code> elements support the <code>srcset<\/code> 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 <code>&lt;img><\/code> and let the email client pick its poison:<\/em><\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;img src=\"my-image.jpg\" \n     alt=\"A pair of flat black dice, one on 5 and one on 3\" \n     srcset=\"my-image.svg\"\n\/><\/code><\/pre>\n\n\n\n<p><em>Thanks to Viktor Mukhachev for the tip!<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>The results here aren\u2019t 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?<\/p>\n\n\n\n<p>Here\u2019s the trick. First, we\u2019ll add one image tag for the SVG and one for a backup JPG:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Image: SVG -->\n&lt;img src=\"my-image.svg\" alt=\"A pair of flat black dice, one on 5 and one on 3\" role=\"img\">\n&lt;!-- Image: JPG -->\n&lt;img src=\"my-image.jpg\" alt=\"A pair of flat black dice, one on 5 and one on 3\"><\/code><\/pre>\n\n\n\n<p class=\"is-style-explanation\">That <code>role=\"img\"><\/code> is there to account for a bug that prevents VoiceOver to properly identify SVG as an image, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/img#identifying_svg_as_an_image\" rel=\"noopener\">as explained over at MDN<\/a>.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Let\u2019s hide that JPG for the email applications that do support SVG. No, <a href=\"https:\/\/modernizr.com\/\" rel=\"noopener\">Modernizr<\/a> does not work for email, but we do know that a few applications ignore any CSS that is in the document <code><\/code>. We can use that to our advantage by adding a classname to the JPG image element and hiding it with CSS:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Image: SVG -->\n&lt;img src=\"my-image.svg\" alt=\"A pair of flat black dice, one on 5 and one on 3\" role=\"img\">\n&lt;!-- Image: JPG -->\n&lt;img class=\"no-showy\" src=\"my-image.jpg\" alt=\"A pair of flat black dice, one on 5 and one on 3\"><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Hide this everywhere, except for those that can\u2019t read this code *\/\n.no-showy {\n  display: none;\n}<\/code><\/pre>\n\n\n\n<p>Now we\u2019re on a roll! We have accomplished the feat of hiding the JPG in all email applications, except Gmail. If we stop here, however, here\u2019s how Gmail renders the code:<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"post-235874\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/12\/svg-email-broken-image.png\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption class=\"wp-element-caption\">That darn broken image!<\/figcaption><\/figure>\n\n\n\n<p>Ack, so close. Now we need to hide that broken image tag where the SVG should go. Let\u2019s do a couple of things:<\/p>\n\n\n\n<ul>\n<li>Add a height and width of zero to the SVG<\/li>\n\n\n\n<li>Add a classname to the SVG that resizes it<\/li>\n<\/ul>\n\n\n\n<p>In other words:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Image: SVG -->\n&lt;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\">\n&lt;!-- Image: JPG -->\n&lt;img class=\"no-showy\" src=\"my-image.jpg\" alt=\"A pair of flat black dice, one on 5 and one on 3\">  <\/code><\/pre>\n\n\n\n<p>Removing the width and height of the SVG inline has the same effect as hiding it. Then, we use the CSS document <code><\/code> hack by adding a class that changes those dimensions back to a full-size image for the email applications that support SVG:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Resize an element that has a width and height of zero to full size *\/\n.showy {\n  height: 100% !important;\n  width: 100% !important;\n}\n\n\/* Hide this everywhere, except for those that can\u2019t read this code *\/\n.no-showy {\n  display: none;\n}<\/code><\/pre>\n\n\n\n<p>Our support starts to look a heck of a lot better:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>AOL Web<\/th><th>Outlook 2013<\/th><th>Outlook.com<\/th><th>Yahoo!<\/th><th>Mail (OSX)<\/th><th>Mail (iOS)<\/th><th>Gmail<\/th><th>Gmail (iOS)<\/th><th>Gmail (Android)<\/th><th>Android<\/th><\/tr><\/thead><tbody><tr><td>Yes<\/td><td>Yes<sup>*<\/sup><\/td><td>Yes<\/td><td>Yes<\/td><td>Yes<\/td><td>Yes<\/td><td>No<\/td><td>No<\/td><td>No<\/td><td>Yes<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\"><sup>*<\/sup> JPG<\/figcaption><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"my-biggest-takeaway\">My biggest takeaway...<\/h3>\n\n\n<p>...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.<\/p>\n\n\n\n<p>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 <a href=\"https:\/\/www.campaignmonitor.com\/dev-resources\/will-it-work\/email-clients\/\" rel=\"noopener\">report on the popularity and market share of email applications<\/a> that is worth checking out.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve talked about SVG quite a bit here on CSS-Tricks, but one area we haven\u2019t 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\u2019ve worked with email before, you may know that [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4,20],"tags":[541,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/235872"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=235872"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/235872\/revisions"}],"predecessor-version":[{"id":375974,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/235872\/revisions\/375974"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=235872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=235872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=235872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}