cben/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.


android 4.0.3 (stock mail app) — only in portrait, landscape shows SVG?!
portrait: 
landscape: 
what's up with that?  will try a couple real devices...


BlackBerry 9930 — shows fallback text and link to png:

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 ->

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

  
## test-mail1.html
<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>

## test-mail2.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>
	<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>