SVG Fallbacks for Email Marketing Campaigns

Scalable Vector Graphics (SVG) deliver razor-sharp visuals at minimal file sizes, but uneven rendering support across major email clients makes fallback strategies essential. Because platforms like Gmail and desktop versions of Microsoft Outlook often strip or block SVGs, email developers must configure robust fallback mechanisms. This guide outlines the essential fallback formats, coding methods, and conditional rules necessary to ensure your email campaigns render flawlessly for every subscriber.

1. Raster Image Fallbacks (PNG and JPG)

The primary fallback for an SVG is a high-resolution raster image, typically a PNG or JPG.

Always export your raster fallbacks at twice the display size (@2x) to maintain clarity on high-DPI (Retina) screens, while explicitly constraining the display dimensions using HTML attributes or inline CSS.

2. The HTML <picture> Element

The <picture> element allows you to define an SVG source while providing an <img> tag as the default fallback for unsupported environments.

<picture>
  <source srcset="image.svg" type="image/svg+xml">
  <img src="image.png" alt="Descriptive Alt Text" width="300" height="100" style="display: block; width: 100%; max-width: 300px; height: auto;">
</picture>

Modern clients supporting SVG and the <picture> tag (such as Apple Mail and iOS Mail) will display the SVG, while older or restrictive clients fall back to the standard PNG in the <img> tag.

3. Microsoft Outlook Conditional Comments (MSO)

Desktop versions of Microsoft Outlook (2007 to present) use the Microsoft Word rendering engine, which fails to support SVG entirely. Use conditional comments to serve raster images exclusively to Outlook while hiding the SVG.

<!--[if mso]>
  <img src="fallback-image.png" width="300" height="100" alt="Fallback Logo" border="0" />
<![endif]-->
<!--[if !mso]><!-->
  <img src="vector-image.svg" width="300" height="100" alt="Vector Logo" style="display: block;" />
<!--<![endif]-->

This ensures that Outlook immediately displays the bitmap image without attempting—and failing—to parse vector code.

4. CSS Display Swapping with Media Queries

Some clients, such as Gmail, strip <picture> tags or ignore inline SVG elements. A dual-image approach using CSS classes lets you display the PNG by default and swap in the SVG only for clients that support modern CSS.

<style>
  .svg-image {
    display: none;
  }
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .svg-image {
      display: block !important;
    }
    .png-fallback {
      display: none !important;
    }
  }
</style>

<img class="png-fallback" src="fallback-image.png" width="300" height="100" alt="Logo" />
<img class="svg-image" src="vector-image.svg" width="300" height="100" alt="Logo" />

5. Essential Best Practices