51

I created animation in flash and converted it into HTML5 using Swiffy.

I think it's using SVG to render all of it; is there some JavaScript or a trick to make IE8 and below support it? My animation is working well with Internet Explorer 9.

Thanks!

Jarrod Mosen
  • 292
  • 1
  • 3
  • 15
Pennf0lio
  • 3,888
  • 8
  • 46
  • 70
  • 1
    This accepted answer on the question [Can't display SVG charts in Internet Explorer 8](http://stackoverflow.com/a/6097246/830125) may help you. In a nutshell, your best bet is to use the VML capabilities of IE8 and below to render the graphics. – Drew Gaynor Feb 19 '12 at 23:11

2 Answers2

65

While no option is perfect, there are a few choices:

1.) Adobe has a SVG plugin for IE8 http://www.iegallery.com/en/addons/detail.aspx?id=444

2.) The Raphael JavaScript Framework allows vector graphics cross browser - http://raphaeljs.com/

3.) Then there are the Open Source projects: http://code.google.com/p/svg2vml/ and http://code.google.com/p/svgweb/

4.) There is the option to display flash for IE8 and below.

5.) There is the option to gracefully degrade for IE8 and below and show a static image in place of the animation.

Based on your reason for the animation - I would recomend 4 or 5.

Todd Moses
  • 10,969
  • 10
  • 47
  • 65
  • 6
    i'd go for raphael.js among others. – Joseph Feb 20 '12 at 04:03
  • Since svgweb displays the SVG in Flash, why wouldn't you recommend that before 4? – robertc Feb 20 '12 at 09:00
  • And he wants to continue updating both the Flash animation and the SVG one? – robertc Feb 20 '12 at 14:38
  • of-course not. Good point. I assumed animation pretty much stayed the same. – Todd Moses Feb 20 '12 at 16:50
  • Ah yes, there's not really enough information in the question to tell – robertc Feb 20 '12 at 18:33
  • Using multiple technologies piled on top of each other is not ideal. If it was created in flash then definitely the easiest and less likely to blow up in edge cases solution is to use the original source flash as the fallback if no svg. – mike nelson Aug 08 '13 at 23:20
  • [Adobe discontinued support for Adobe SVG Viewer on January 1, 2009](http://www.adobe.com/devnet/svg/adobe-svg-viewer-download-area.html) – Ricardo Apr 13 '15 at 19:26
1

There are two options that will not tie you to specific frameworks (raphael) or complicated solutions (svgweb):

  1. Chrome Frame: if you're going to get an extension, get that one
  2. Server-side rasterization: send your SVG back to the server, inkscape rasterize to png, send it back.

If you go number 2 (yes it is a crappy option), and want to keep clickable parts and tooltips, you will have to use invisible divs, or labels that are in HTML on top of the rendered svg.

You can reuse the positioning information from the svg to position those divs in order to avoid overhead for that part.

The best option probably is to diplomatically encourage them to use a real browser, but then it's not always possible for those who live under the rule of an unskilled IT department ;)

Morg.
  • 697
  • 5
  • 7
  • Unless #2 was done offline (ahead of time), I don't see it being realistic; he has an animation in SVG which implies multiple frames that would need to be rasterized. That's going to take a long time. – T.W.R. Cole Aug 07 '13 at 21:55
  • Chrome frame makes IE supoprt SVG (on the same level that Webkit supports SVG): http://code.google.com/intl/de/chrome/chromeframe/ It is a plugin install and enables canvas, SVG, HTML video, etc. It replaces IE's own rendering engine. Authors can add a metatag to force rendering in Chrome Frame: – David Karlsson Jan 19 '14 at 13:23
  • Yes, I think that is part of my answer. – Morg. Jan 21 '14 at 11:47
  • unfortunately chromeframe is not supported anymore: https://www.google.com/chromeframe/about/ use raphaeljs or ask your users to update their browser. – lepe Aug 01 '14 at 08:00