Providing Alternative to .SVG for IE8

My animation is being used in hospitals that still use IE8. The main controls are .SVG graphics, they look like crap when they are .PNGs as the animation is responsive and gets large and very small. The problem is that the .SVGs are the main controls for the animation so when they don’t show up in IE8 it won’t function. Is there a way to provide an alternative .PNG through Hype? I did this in JavaScript in Edge Animate. Any help is great thanks.

Here is the animation, the pointy hand and slider are all .SVGs

This is what it looks like in IE8 using the Advanced Export Options that are supposed to make a .PNG alternative?

Can you share your document? It may be that your SVG files aren’t able to be converted. There’s something odd with your SVG (this might not be the issue). It is 849KB. When I open and re-export with Sketch, it gets down to 4KB.

Here’s a test file. The bottom SVG is regenerated: Archive.zip (1.5 MB)

I have gone over the .SVG images and figured out how to export them better through Illustrator, they are about 4K now. That one image of the hand on the front had been exported incorrectly and then passed on to all my files. However it still does not display in IE8. The one you sent me didn’t either. It displays a box with an X in the top left (the Archive.zip you sent does as well).

Back to my original question… how do I make the .SVG go invisible and show the alternate .PNG in IE8 within Hype?

Really coming down to the wire with this one, any help is appreciated.

There are lots of ways to do this, but not really with the default Hype options. A web search for "png fallback for svg" will show lots of articles.

Also, conditional comments could be used... Conditional comment - Wikipedia

...and of course JavaScript. If user agent is IE 8, then PNG, else SVG. You'd just have to add good browser detection. Again, that's just a matter of searching the web for a good tutorial.

I have searched all of the SVG Fallback articles and tried to implement many of them but they don’t quite tie into the way that Hype names it’s elements. The one I thought would work the best calls an <img> tag, that doesn’t work as the image is in a <div> tag, not <img>… tried calling it in a <div>, nope. Tried finding the elementID and switching elementID, changing the background image. I’ve read about 20 SVG Fallback solutions but none are for usage in Hype so the gap between finding the code and implementing it into Hype is where I need help.

Has anyone done this in Hype that can give me more specific instructions on how to get it to work?

seems that hype swaps to img-tag when detecting ie.

set an id to your svg-elements (hype-container)
place the png to swap in the resources

seems the img-tag-id will be: ‘img_’ + yourId

so onsceneload try:

//stackoverflow ...  
  function getIEVersion() {
        var match = navigator.userAgent.match(/(?:MSIE |Trident\/.*; rv:)(\d+)/);
        return match ? parseInt(match[1]) : undefined;
    }    
    
if(getIEVersion() < 9){
var imgId = 'img_' + 'yourId';

hypeDocument.getElementById(imgId).src = '${resourcesFolderName}/toSwap.png'
}
4 Likes

Sweeeet! Thank you for this I was just about to give up. Thankfully we only have to support IE8 until the end of this year, but this makes all the difference (looks horrible, but it functions). Now, if there are multiple images in a file that need to be changed out would the if statement code work like this?..

if(getIEVersion() < 9){
var imgId1 = 'img_' + 'fileID1';
var imgId2 = 'img_' + 'fileID2';
var imgId3 = 'img_' + 'fileID3';

hypeDocument.getElementById(imgId1).src = '${resourcesFolderName}/fileName1.png'
hypeDocument.getElementById(imgId2).src = '${resourcesFolderName}/fileName2.png'
hypeDocument.getElementById(imgId3).src = '${resourcesFolderName}/fileName3.png'
}

Thank you SO much for helping out, made a big difference in the look of this project to be able to use the .SVGs.

the devil is in the details :wink:

to say: this has been more or less a guess of mine ... be sure to consult hypeguys on this

Nice day :smile:
Hans

Multiple files work as well per my example.

yeah, you corrected your code :smile:
my intend for you was to get adviced by the hypeteam before relying on my solution. @Daniel did not step in to this … which may be a hint better not to rely on it … ¿¿¿ Hype does a lot in the background to provide best browsersupport and looking from outsidecan lead to pardly wrong suggests

It looked like there was some issue with the SVG files exported from Illustrator. I would still very much like to get your .ai file if you can send it in our PM @gthroop!

Hey Daniel, I solved that problem, the issue wasn’t the Illustrator file, it was the way I was exporting the .SVGs. I was exporting the whole contents of the file. I discovered “Export Selection” and the file sizes went down to 1-4K, so all is good there. The code @h_classen offered works great to switch out the .SVGs for .PNGs in IE8, but you can’t click on the .PNG (it’s the button to enter the animation). Super frustrating, only have to cover this browser until August, but something has to show up in IE8! Is there code to make a poster show up in IE8? I have the detect IE8 code that works in this method, how do I place a still JPG over the top of the animation?

You could use a standard rectangle with 1% opacity over the SVG/PNG to make a clickable surface. If you have an animation on those elements, make a group and pair the rectangle + svg together, and set your animation on the group.
(IE 6-8 sometimes makes elements with 0% opacity actually invisible to clicks & the eye)

Yeah, I had a feeling it might do that, I already have a “hotspot” there (circle at 0% opacity) and it doesn’t read that either, I will try bringing up the opacity to 1% on the “hotspot”. Thanks!

Ah yeah, I’m gonna need a poster! Look at what this horrible browser did to my animation!
Here it is in a modern browser…
Sally in the Hospital

This is what it looks like in IE8!

By the way, I can get in with it at 1%, but it puts it at 100%, which is why you are seeing brown and white circles all over the place.

How do I create a “poster” image to replace the animation in IE8? Thank you for slogging through this with me!

So for anyone else following this thread. Here is how I gave up and created a poster image that is called in IE8 to stop the madness of trying to get this to work in IE8…

  1. Create a new Scene (named it ‘poster’)

  2. Took a screen grab of a still I could use (couldn’t figure out how to do it in Hype)

  3. On Scene Load called a new function I named “detectIE8” and added this code:

    function getIEVersion() {
    var match = navigator.userAgent.match(/(?:MSIE |Trident/.*; rv:)(\d+)/);
    return match ? parseInt(match[1]) : undefined;
    }

    if(getIEVersion() < 9){
    hypeDocument.showSceneNamed(‘poster’, hypeDocument.kSceneTransitionCrossfade, 1.1);
    }

Works like a charm!

2 Likes