From what I read known SVG->PNG fallbacks don't work well in 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.
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)
- 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
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.
what's up with that? will try a couple real devices...
Did I mention the fallback can be any HTML, e.g. fully styled text?
- 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.
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:
Using idea related to http://developersdev.blogspot.ru/2014/10/svg-fallback-pure-css-can-i-use-part-5.html
Trying to use
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.