Fallback for SVG anim

[L.Adlon]

Hi.  I could use some help with something I'm trying to get compatible on all devices.  So far, I got it working on everything except SOME iPhones and my parents iPad.

I have two pages that both have an animation block done with an SVG tag containing a number of image tags, each containing a png image.  Those all have a unique class defined, and are then animated via GSAP (Greensock, a Javascript-based animation system).

I also have a still image png of that animation to serve as a fallback for devices that don't support SVG and/or Javascript.  I have the page set up so it uses the fallback still by default, unless it detects support for the required items.  If it passes that test, the fallback still is removed (display:none), and in its place, the SVG canvas is brought in.

So, all that works great, except that on a few devices, it still isn't working.

What I suspect, is that everything is fine except for the actual test for support.  I think what is happening is that on some devices, it 'passes' the test, yet fails to display the SVG... resulting in a blank area where the still/animation would be.

I've used a number of methods to test for SVG compatibility (all taken from online articles, as it's beyond me to think up code to do that sort of thing), but I suspect most/all of them are testing for support for the SVG tag itself, whereas I think I need to test for support of the IMAGE tag within an SVG canvas (between the opening and closing SVG tag).

So, I'm hoping someone here might be able to outline a contemporary, well-supported bit of code to test for that specific requirement, as opposed to just the SVG tag itself.

The basic structure of the animation/still block is:

<div class="graphic">
  <img src="img/fallbackstill.png" class="fallback" />
  
  <svg height="300" width="300" class="anim">
    <image x="0" y="0" href="img/head.png" class="head"/>
    <image x="0" y="0" href="img/body.png" class="body"/>
         ....and so on....
  </svg>
</div>

  Again, the fallback image is removed via display:none if the device does support SVG and Javascript.

  An example of one of the support tests I have tried using is:

 

<script>
  var svgSupport = !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
  if ( svgSupport ) {
    let animblock = document.querySelector(".anim");
    document.querySelector(".fallback").style.display = "none";
    animblock.style.display = "inline";
    animblock.style.maxWidth = 300;
    animblock.style.maxHeight = 300;
  }
</script>

  So, if the test is passed, I remove the fallback image, and change the animation item's display value from it's default (set in CSS) value of none to inline, to put it where the fallback image used to be.  So, only one of these two items will ever be present...  The animation block is 'none' by default, and the fallback image is 'inline' by default.... If the tests pass, the values of those two are reversed.

That's the theory, at least.   Seems to work on most devices, but I do have a few troublemakers... namely (so far) SOME iPhones (it does work on some), and my parent's iPad (...which may only be because it is old, and has never had an O/S update....  I DID get it working on my ancient iTouch, despite the fact that it wasn't working on it previously).

So, again, my theory is everything is working, but that the test is not actually testing for the very thing that ISN'T being supported... namely the image tag within the SVG canvas.... seeing as that's the only thing I have inside the SVG canvas.

I'm open to any theories.  I've managed to improve matters (...got it working on the ancient iTouch), but am a bit out of my realm when it comes to modifying the support test to check for image support (within an SVG canvas) specifically... assuming that's the issue.  On the devices that support it, the SVG animation displays perfectly.  On my iTouch, it properly displays the fallback still image.... but a few devices just leave a large blank area in place of either of those... which I suspect is because it is passing the test, removing the fallback image, and TRYING to display the SVG canvas and failing (...which, since the SVG tag has been tested for, theoretically leaves only the image tags to be potentially unsupported).

Any help on this would be greatly appreciated.  I'm sure this will be child's play to someone here... either in realizing what could be wrong, or in modifying the code so it will be more specific in what it is testing support for.

Hope you can help!

Thanks!