How to make SVG work with IE?

Question

Does anybody know of a comprehensive library to make SVG work with IE (7 and 8 in particular)?

I wanted something Javascript which could be included in my web page and which would silently convert all my SVG to VML in a fashion similar to what excanvas does for Canvas.

Answer 1

The Raphaël—JavaScript Library can help you out there.

Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics and supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

EDIT:

There are two more js-libraries which use vml to render svgs in IE:

• Ample SDK (where it should be possible to easily integrate existing svg files)
• DojoX GFX from the Dojo Toolkit

Answer 2

Google's SVG Web does this. According to the project website:

SVG Web is a JavaScript library which provides SVG support on many browsers, including Internet Explorer, Firefox, and Safari. Using the library plus native SVG support you can instantly target ~95% of the existing installed web base.

Whilst it's described as a JavaScript library it also requires Flash 9+. This isn't usually a problem, but if you're in a corporate environment with old Flash or no Flash on the workstations it's not going to work.

Also, it is still in Alpha which could be a problem, depending on what your project is.

Answer 3

I think SVGWeb is the way to go, even if it is based on Flash as VML is far from being fast enough for lots of applications.

Answer 4

Adobe provides scripts to automatically detect, install, and redirect you back to your original site:

http://support.adobe.com/devsup/devsup.nsf/docs/51780.htm

http://www.adobe.com/svg/workflow/autoinstall.html

I have been using this fairly successfully on my site.

Answer 5

A more low tech solution would be to use something like svg_alike (insert conflict of interest notification here :)). It checks for the SVG support, then if it doesn't find it it replaces all SVG images with PNGs.

https://github.com/forwardadvance/svg_alike

You lose the advantages of smooth vector zooming, and retina support, but IE8 users are unlikely to make use of these features anyway.

The advantage is that you don't have to convert your images into JavaScript. I think it provides 80% of the value for 5% of the work.