svg on older IE browsers [duplicate] - javascript

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.

Related

Canvas elements not working in IE 8 and below

I have used this tutorial: Save Google charts as a image which converts Google Graphs into an image and then saves it for me.
It's working perfectly and it achieves this by creating a canvas element and then drawing the graph onto it.
However and typical with IE its doesnt work with any browser lower than 9. Which is a huge problem as most of our clients are still in the dark ages. sadly.
Can anyone recommend a good solution to this or has any of you got any experience to share on this matter?
You can use ExCanvas
Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.
Reference
#wizkid's answer is a good suggestion in it self - however, the only problem is that exCanvas do not support toDataURL() and won't due to the nature of it using VML. This means you won't be able to use it to save out images.
Update
You can use flash to solve this problem. There are two solutions available:
http://code.google.com/p/fxcanvas/
http://flashcanvas.net/
Both of these should be able to save out bitmap images from the "canvas" as png and jpeg (ref: fxcanvas, flashcanvas). This would of course require the client to have Flash player installed.
The third option is to use a server as a proxy (or as processor) for Google charts.

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/

Detect if browser supports google graphs

Yesterday I was having an issue with some google graphs on my site while running opera. I was getting the error "your browser does not support graphs". Today Its absolutely fine and in fact seems to be running a bit quicker.
I'd like to have a backup in my javascript so that if its not supported Ill just display a table.
Is there any such way to do this or do i need to check against a list of incoming browsers and figure it out for myself?
From http://code.google.com/intl/en/apis/chart/interactive/docs/:
Charts are rendered using HTML5/SVG technology to provide
cross-browser compatibility (including VML for older IE versions) and
cross platform portability to iPhones, iPads and Android.
They are apparently using inline SVG. http://caniuse.com/#search=inline%20svg isn't very useful here because that's about HTML5 parser recognizing SVG content, Google is generating SVG content dynamically however. I think that the following code snippet tests for inline SVG support correctly:
var svgRoot = null;
if ("createElementNS" in document)
svgRoot = document.createElementNS("http://www.w3.org/2000/svg", "svg");
if (svgRoot && "width" in svgRoot)
alert("Inline SVG supported");
If a dynamically created SVG element has SVG-specific properties then everything should be fine. You will still have to assume that MSIE is generally supported (via VML). Or use How do you detect support for VML or SVG in a browser to detect VML support. And that will hopefully match the compatibility checks that Google is performing (minus glitches like the one you apparently observed).

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.

Scripting SVG

I'm considering developing a website similar to stackoverflow, but the answers may also consist of drawings (schematics, in this case). I want to have an area in the answer form where they can make this schematic without requiring special plugins, etc.
Are we to the point where SVG has or should have critical mass soon (1-2 years) such that designing a website where script-run SVG as a primary feature is reasonable (ie, requiring Firefox or another SVG/AJAX compliant browser)?
What are some good resources for learning cross platform SVG scripting (likely in javascript)?
-Adam Davis
Raphael looks like an interesting take on the problem of cross-browser vector graphics.
Unfortunately, I don't have an answer, but I do have three pointers to projects that you could look at.
The first is the Lively Kernel by Dan Ingalls (yes, the Dan Ingalls) at Sun Labs. It is an implementation of a Smalltalk Virtual World in JavaScript on top of SVG. More precisely, it is an implementation of the Morphic GUI framework from Squeak Smalltalk in JavaScript using SVG and a port of (parts of) Squeak Smalltalk in JavaScript.
Or, if you're not a Smalltalker and the above doesn't make sense to you: it's an Operating System, written in JavaScript with the JavaScript interpreter as the CPU, SVG as the graphics card and the browser as the computer.
This is about as extreme as it gets, when it comes to JavaScript and SVG. And it only fully works in Safari 3 and partly in Firefox 3, although there is an experimental port to Internet Explorer as well.
The second project is John Resig's Processing.js port of the Processing visualization language to JavaScript. It uses the <canvas> element instead of SVG precisely because of the problems that you mentioned. This one however, only works in Firefox 3.
The third one is Real-Time 3D in JavaScript by Useless Pickles. It uses only JavaScript, DOM and CSS and no SVG or <canvas> or Flash or whatever. And it is portable to almost any browser, including Internet Explorer 7 and up. Doing 2D should be even easier than this.
Between those three projects you should be able to find some inspiration and also to find some people who tried to push the envelope with JavaScript and SVG or JavaScript and Graphics and can tell you what works and what doesn't.
Conclusion: doing cross-browser SVG or cross-browser <canvas> is nigh impossible, but with a little bit of craziness, cross-browser graphics without SVG or <canvas> is possible.
SVGWeb is a script that adds near-native SVG capabilities to IE using flash. All the other major browsers support SVG.
http://code.google.com/p/svgweb/
1/ probably never - if IE wanted to add it, then I would have though it would have done so by now; but there are workarounds using SilverLight and Gecko to provide rendering. On the other hand, there are cross-browser graphics APIs available. I've done largish front ends using XULRunner and SVG, but nothing on the web which had to cater for IE.
2/ The two I referred to most often were the SVG pages on mozilla.org and this SVG DOM reference . All of my SVG links are here on delicious
There's one existing editor at http://www.bpel4chor.org/editor/; also if all you want is schematics where all arcs are on a grid, you can do that quite well using divs and images without SVG. Or you could just go the lo-fi route
As #jwmittag mentioned <canvas> is an option.
It works in Saffari and Firefox 3, Opera 9, and people are developing support for IE.
You could easily capture mouse clicks associated with the current tool and properties.
Redrawing the canvas on every page display.
I just finished a project using <canvas> and it's a simple and very powerful API to work with, especially if you have ever done any OpenGL or Cairo work.
Good Luck, sounds like a cool project.

Categories