We Keep Coding

svg on older IE browsers [duplicate]

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.

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

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.

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.

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.

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.

What browsers support interactive SVG documents?

I'm working on a project that requires an interactive map. I want to use an SVG document with some custom javascript code embedded in it much like this developer has done:
http://treeblurb.com/xmap/svg/melbourne_central.svg
Achieving what I want to do is trivial but I can't tell which browsers would support this level of interaction. Essentially I need to:
Embed custom script tags into the document.
Adjust attributes of nodes (i.e. fill)
Add mouse events to specific elements.
I guess my question is - if a browser supports native SVG, would it allow me to do all of these things?

Native SVG is supported by most versions of Chrome, Firefox, Opera and Safari. IE8 does not support it, but IE9 and above does. Android supports it from Honeycomb onward.
You may want to take a look at Raphael. It not only makes SVG-like functionality available in IE8 and below (by falling back to VML), it also provides methods to manipulate all objects, which you can even combine with JQuery.
There's also good information comparing Raphael to JQuery SVG here.

I.E. 8 and earlier does not support SVG. Android 2.3 and earlier also does not support SVG. Check out more browser compatibility issues here: http://www.caniuse.com/

SVG/VML browser compatibility table

I'm interested in finding a browser compatibility table that lists the parts of SVG/VML supported by each version of Opera, Safari, Chrome, Firefox and Internet Explorer (also Konqueror would be nice) in the vein of Quirksmode.
I have found the following two compatibility tables for SVG but neither of them provide enough detail:
http://caniuse.com/#cats=SVG&statuses=rec
http://www.codedread.com/svg-support.php
The information in the first link seems to clash with libraries like Raphael which claim to fully support animations in Firefox 3.0+ and Safari 3.0+ whilst the link suggests that the animation module isn't implemented till later versions for those two browsers.
The second link simply doesn't go far back enough for me to be able to draw conclusions about which features of SVG/VML I can use to ensure compatibility with older browsers.
Needless to say I'm endlessly confused.
To be perfectly clear, I'm interested in finding out which part of SVG are supported in different versions of all the popular browsers. As IE doesn't support SVG I'm interested in finding out which parts of VML the are supported in the different versions of IE.
If the developers of the libraries have found this information it must exists, it just seems to be evading me.
Any help would be much appreciated.

You may find this article helpful:
Creating SVG vector graphics for maximum browser compatibility
http://voormedia.com/blog/2012/10/creating-svg-vector-graphics-for-maximum-browser-compatibility
It shows some good examples of SVG features which aren't even supported by the latest versions of Chrome.
There's also a nice compatibility table at the bottom.

What is the most widely-used Javascript graphics library that is the most cross-browser compatible?

I know there are tons of great graphics libraries for javascript...
Now, I know that there are other questions asking for graphics library suggestions. But none of them address the following issues:
What is the most widely-used javascript-graphics library right now?
Can it handle text, rotation, arcs, bezier-style line geometries, and is compatible with at least FF, IE(7/8), Safari, and Chrome...
Also, because of my client's fears of required plug-ins that users need to add to their browser, it needs to be something that can load on-the-fly and not require the user to permanently install anything external.
Does such an animal exist?
I am looking for your experienced opinion on this one.

For cross platform support I generally find I can trust Raphael to do the job.

I'd look at processingjs first.
http://processingjs.org/

I suggest using the html5 <canvas/> element with the 2d graphics API.
Although the canvas element isn't supported in IE, you can make it work with excanvas.js from http://code.google.com/p/explorercanvas/.
Explorer canvas is a simple javascript include that emulates canvas element support using vector graphics. On the other browsers, you will have canvas support.
I used this approach to make a realtime scrolling trend control that worked across browsers.

Canvas Element and IE

Well not just IE, any browser that doesn't currently support it
I want to start using the processing.js framework. It's used for making images with the canvas element. However I'm reluctant to use it due to the fact that it's not widely supported.
So what's the best way for me to give the user an alternative image if they do not support the canvas element?
I'd need something like...
if(!canvas){
element.style.backgroundColor = 'red';
}
Is there a standardised way of doing this yet? If not what's the best thing I could do?

Any content between the <canvas></canvas> tags will be displayed if the canvas element is not supported. So you can try:
<canvas><img src="alt-image-for-old-browsers.png" /></canvas>
The logical thing that comes to mind is to place the JavaScript you want to run between the <canvas></canvas> tags:
<canvas>
<script>
document.getElementById('element').style.backgroundColor = 'red';
</script>
</canvas>
But alas this doesn't work. Even browsers that support the Canvas API will execute the script.
So perhaps the best thing you can do to programatically check that the browser supports the canvas API is to check the getContext method available on all <canvas></canvas> elements:
function supportsCanvasAPI() {
var canvas = document.createElement('canvas');
if (window.G_vmlCanvasManager) { // IE ExplorerCanvas lib included?
G_vmlCanvasManager.initElement(canvas);
}
return 'getContext' in canvas
}
That creates a dummy canvas (so as to not worry about grabbing a reference to one in the DOM already) and checks if the getContext property exists on the element. It also checks to see if ExplorerCanvas has been included for IE. It won't tell you exactly what features of the API are supported (beyond the standard set of shapes, paths, etc).
An article on feature-detecting HTML5 features (like canvas) can be found here.

if (typeof HTMLCanvasElement === 'undefined') {
// redirect to another page, or whatever you want
}

Yes, actually the useful property of HTML is that it ignores unknown tags. So the following:
<canvas> This text is shown to IE users </canvas>
Will show the fallback text in IE.

You may also consider using one of the JavaScript libraries that essentially create a working canvas tag in IE. Here's one: http://code.google.com/p/explorercanvas/

You could look at the Modernizr library to check for support for the various features you're interested in.

Canvas works on Opera, Chrome, Safari, Firefox, IE6-8 (with excanvas.js, as #philfreo mentioned).
Processing.js, in particular, does work on IE, as is stated on the Processing.js homepage:
Processing.js runs in FireFox, Safari,
Opera, Chrome and will also work with
Internet Explorer, using Explorer
Canvas.
There are a few tricks with IE: You need to pay special attention when you create a Canvas dynamically, you can't attach events to it (directly--you can attach to a container div), you can't get pixel info from the canvas, and radial gradients aren't supported. Oh, and it's a lot slower on IE, of course.
I don't think any of those caveats will apply to you when you're working in processing.js, except of course for the slowness of excanvas.js emulating the canvas.