Create a gist now

Instantly share code, notes, and snippets.

@cben /README.md
Last active Jul 4, 2016

What would you like to do?
svg>switch>foreignObject>img fallback in email

From what I read known SVG->PNG fallbacks don't work well in email:
http://stylecampaign.com/blog/2014/01/basics-of-svg-in-email/
http://emailcodegeek.com/svg-images/
http://mikevoermans.com/css/svg-png-fallback-html-email

But then I stumbled upon this 2009 technique: http://www.kaizou.org/2009/03/inline-svg-fallback/ and it works surprisingly well!

Caveat: apparently it only works when the svg contains no text; any text content might be visible (in addition to the fallback) in clients that don't understand svg.

test-mail1.html

note wiewBox typo.

Results at https://www.emailonacid.com/app/acidtest/display/summary/DnVjTXH0sSd9k0Ux12DKRj4SbZLNMIFmEuAGyfWTtNDn6/shared

SVG (red circle) shown on:

  • BOL Chrome (win)
  • Orange.fr Chrome (win)
  • Outlook.com Chrome (mac)
  • Outlook.com Chrome (win)
  • Outlook.com Firefox (mac)
  • Outlook.com Firefox (win)
  • Outlook.com IE 10 (win)
  • Outlook.com IE 11 (win)
  • Outlook.com IE 9 (win)
  • Outlook.com Safari (win) — huge height
  • SFR.fr Chrome (win)
  • T-Online.de Chrome (win)
  • Terra Chrome (win)
  • Apple Mail 6 — huge height
  • Apple Mail 6 — huger height
  • Outlook 2011 (Mac)
  • Thunderbird
  • iPad 2 — huge height
  • iPad Mini — huge height
  • iPhone 5S (iOS 7) — huge height
  • iPhone 5S (iOS 8)
  • iPhone 6 (iOS 8)
  • iPhone 6+ (iOS8)

darn good! :-)

The runaway height can probably be fixed by styling. EDIT: the code I tested has a wiewBox typo!

Fallback text (red) and PNG (blue square) show almost everywhere else.

  • I'm particularly happy that Gmail's complete SVG blocking (since they started transcoding) does let the inner text & PNG through.

Nothing shows both at once.

None of the images show in:

  • Lotus Notes 6.5, Lotus Notes 7 — fallback text does show, but PNG shows as broken image icon. That's simply because Notes < 8 didn't support PNG. lotus

  • android 4.0.3 (stock mail app) — only in portrait, landscape shows SVG?! portrait: android portrait landscape: android landscape

    what's up with that? will try a couple real devices...

  • BlackBerry 9930 — shows fallback text and link to png: blackberry I suspect it can't show [external?] png images anyway but didn't search...

Did I mention the fallback can be any HTML, e.g. fully styled text?

Untested aspects

  • network: are both loaded or only one?
  • what happens with images blocked?
  • controlling width/height/vertical-align on both images.
  • external / attached SVG — I only tested inline <svg> (which is generally coolest!).
    • data:/attached SVG — I only tested external link. I expect support will be same as attached PNG but you can never know.

Problem: text

Only the fallback is visible in clients that don't understand svg because typical svg contains only elements with no text. However if the svg were to include text elements, they would be visible:

http://codepen.io/cben/pen/EaJxXK -> ie8

test-mail2.html

Using idea related to http://developersdev.blogspot.ru/2014/10/svg-fallback-pure-css-can-i-use-part-5.html Trying to use symbol -> use "conceptual deep clone" to separate styles seen by browsers that treat these as unknown nodes, from styles actually rendered in the svg. The former hopefully will hide text (display: none and friends) while the latter should render it.

=> In browsers: http://app.crossbrowsertesting.com/public/i866dfd0fa0b9da1/screenshots/z3b1f6bf9ce507178a60 svg text visible (together with fallbacks) in IE6, IE7, hidden in IE8; everything else does render svg normally.

In email clients: https://www.emailonacid.com/app/acidtest/display/summary/b7RliDGw8YOPVZ5wiRLxKczHfyOZTXxmF6zJyMdo8T75y/shared

<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" wiewBox="0 0 200 100">
<switch>
<circle cx="150px" cy="100px" r="50px"
fill="#ff0000" stroke="#000000"
stroke-width="5px"/>
<foreignObject width="200" height="100">
<span style="color:red;">
This is not a red circle.
<img src="http://placehold.it/200/09f/fff.png">
</span>
</foreignObject>
</switch>
</svg>
<p>See http://www.kaizou.org/2009/03/inline-svg-fallback/</p>
</body>
</html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" viewBox="0 0 200 100">
<!-- http://freshinbox.com/blog/bulletproof-solution-to-hiding-mobile-content-when-opened-in-non-mobile-email-clients/ -->
<g style="display:none; max-height:0px; overflow:hidden;">
<symbol id="sym">
<circle cx="150px" cy="100px" r="50px"
fill="#ff0000" stroke="#000000"
stroke-width="5px"/>
<text x="10" y="20"
transform="rotate(30 20,40)" style="color: red;">
SVG Text Rotation example
</text>
</symbol>
</g>
<switch>
<use xlink:href="#sym"></use>
<foreignObject width="200" height="100">
<span style="color:cyan;">
This is not a red circle.
<img src="http://placehold.it/200/09f/fff.png&text=PNG">
</span>
</foreignObject>
</switch>
</svg>
<p>See http://www.kaizou.org/2009/03/inline-svg-fallback/</p>
</body>
</html>
Owner

cben commented Mar 30, 2015

More recent info on the foreignObject technique: http://davidensinger.com/2013/04/inline-svg-with-png-fallback/

Unfortunately, both the SVG and the image fallback will be loaded by the browser.

https://css-tricks.com/svg-fallbacks/#the-fallbacks has a complicated style vs svg>style variation on this that only downloads one in all browsers; I don't feel like even trying that in email.

Owner

cben commented Mar 31, 2015

Caveat: I believe that only the fallback is visible in clients that don't understand svg because typical svg contains only elements with no text.
However if the svg were to include text elements, they would be visible:
http://codepen.io/cben/pen/EaJxXK -> http://app.crossbrowsertesting.com/public/i866dfd0fa0b9da1/livetests/2859208/snapshots/z616853d6ddef3794564

Owner

cben commented Aug 30, 2015

Bah. The emailonacid tests are gone. It seems they only keep results for 30 days :-(
Will have to rerun and copy into the gist for posterity...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment