17

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.

KJ Saxena
  • 21,452
  • 24
  • 81
  • 109

5 Answers5

16

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
räph
  • 3,634
  • 9
  • 34
  • 41
  • 3
    Can you open a svg with this library? – Milhous Sep 15 '09 at 17:31
  • 1
    Not really. of couse only a subset of svg/vml is supported, so you cannot really take an svg file and "open" it in raphael. But the path synatax is the same, so basically you have to copy all the paths from svg into your javascript code (or write something which does this automatically for you). I think most people just copy their (simplified) paths from inkscape or other editors into the raphael code – räph Sep 16 '09 at 14:16
15

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.

David Webb
  • 190,537
  • 57
  • 313
  • 299
6

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.

Fabien Ménager
  • 140,109
  • 3
  • 41
  • 60
2

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.

John Gietzen
  • 48,783
  • 32
  • 145
  • 190
  • 4
    Adobe's `svg` implementation is no longer being developed. – Esteban Küber Sep 15 '09 at 13:24
  • In fact, I think they quit developing it long before IE 8 was released. If it works with IE 8, it is just luck. – T.E.D. Sep 15 '09 at 13:51
  • It does work in IE8. I have tested it. They are still supporting it as a legacy download. – John Gietzen Sep 15 '09 at 14:12
  • I thought I had read it does NOT work in IE8 but obviously you have it doing so. I would be wary of any future use, though. Keep in mind as others have said that Adobe stopped development work on this years ago and only offer that download link with zero support. It could disappear tomorrow. – Rob Sep 23 '09 at 03:12
0

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.

superluminary
  • 47,086
  • 25
  • 151
  • 148