SVG support for Internet Explorer 8 and below

Question

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!

Answer 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 ;)

Answer 2

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.