SVG to PNG for Email Newsletters: Why Your Graphics Break in Outlook & Gmail

June 26, 2026 · 5 min read

Last month I sent a client's rebrand newsletter to 40,000 subscribers. The header graphic—a crisp, animated SVG logo I'd spent three hours perfecting—showed up as a broken image icon for 62% of recipients. I tested it in my Gmail, it looked fine, and I hit send. Rookie mistake. I've been designing for the web for years, but email is a different beast entirely.

Here's what I learned the hard way about SVG in email, plus the PNG fallback workflow I now use for every campaign.

The Email Client SVG Support Chart (It's Ugly)

I checked Can I Email's SVG support data after the incident and the numbers confirmed what I'd just experienced firsthand:

• Apple Mail (iOS/Mac): Full SVG support. This is why my test looked fine—I use Apple Mail.
• Gmail (web & mobile): Strips SVG entirely. Renders nothing. 53% of my client's list uses Gmail.
• Outlook (desktop): Word's rendering engine. SVG? Never heard of it. Falls back to alt text—if you remembered to add one.
• Outlook.com / Office 365: Partial support, unpredictable. Some SVGs render, others become blank rectangles.
• Yahoo Mail: Blocks external SVGs by default. Inline SVGs sometimes work, but only basic shapes.

Why I Now Convert to PNG for Every Email Graphic

PNG is the only image format that renders reliably across all major email clients. JPEG works too for photos, but for logos, icons, and graphics with text, PNG's lossless compression keeps edges sharp. I convert every SVG to PNG at 2x the display size for retina screens:

• Email header (600px wide display) → export PNG at 1200px wide
• Social icon (40px display) → export at 80px
• Product graphic (300px display) → export at 600px

This isn't about loving PNG—it's about your graphic actually showing up. I use svg2png.org with the 2x scale setting for every email graphic now. Three clicks, download, embed in the email. Done.

The One Place SVG Still Makes Sense in Email

There's exactly one scenario where I still use SVG in emails: dark mode-aware graphics for Apple Mail. You can embed an SVG with a media query that swaps fill colors when the user is in dark mode. But here's the catch—it only works in Apple Mail, and you need a PNG fallback for everyone else:

<picture>
  <source srcset="logo-dark.svg" media="(prefers-color-scheme: dark)">
  <img src="logo.png" width="600" alt="Company Logo">
</picture>

Even then, I've had mixed results. Outlook ignores the picture element entirely and shows nothing. My recommendation: design one PNG that works on both light and dark backgrounds—add a subtle white stroke or glow if needed. It's one asset, zero conditional logic, and renders everywhere.

Compression Matters More in Email

Here's something I didn't think about until a client's email took 8 seconds to load on mobile: email clients don't lazy-load images. All graphics load immediately when the email opens. A 600KB header PNG over a 4G connection? That's 2-3 seconds where the reader sees nothing.

I now compress every email PNG to stay under 100KB for headers and 30KB for icons. A browser-based PNG compressor handles this well, and I've found that PNG-8 with 128 colors is indistinguishable from PNG-24 for most email graphics at a third the file size.

My Email Graphic Checklist

After that 40,000-recipient embarrassment, I made a checklist. Every email graphic now goes through these 5 checks before I send:

1. PNG format, not SVG. No exceptions for primary graphics.
2. 2x retina dimensions. 600px container = 1200px PNG.
3. Under 100KB. Compress until it hits the target.
4. Alt text written. Outlook shows this when it blocks images.
5. Tested in Gmail + Outlook. Send a test to both before the real send.

Email design is 90% defensive engineering and 10% creativity. The most beautiful graphic in the world is worthless if your reader sees a broken image icon. Convert to PNG, compress aggressively, and test everywhere.

Written by Jamie Park — UI/UX Designer. I design for web and email, and I've learned email the hard way. More about me →