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.
Related
I'm working on a project via arcgis javascript api.
With hundreds of graphics drawn on a graphicsLayer, it works well on chrome or IE11, but on IE8 and supposedly also IE6 when I drag the map, it's extremely slow so that makes it completely unusable.
I found the "displayOnPan" option of graphicslayer which seems to be designed specifically for IE. But if I turn that off, the performance is still unsatisfactory, besides, the disappearing and reappearing of the graphics each time the map is panned are really irritating.
No question of requiring the users to update or change the browser.
Is there any ways to the problem?
According to ESRI, no. This is what I got from ESRI's support centre when I put the same question to them
Hi Clark,
The Javascript API support for Internet Explorer 9 introduced significant performance improvements for drawing graphics.
In earlier versions of Internet Explorer, drawing large number of graphics performed poorly compared to browsers like Firefox and Chrome. At IE9, graphics drawing performance is much improved over earlier versions of IE and is comparable to other browsers.
A table comparing performance between the different browsers is available at https://developers.arcgis.com/javascript/jshelp/new_v23.html
Feature services are essentially graphics. If the layer(s) you're loading contain a large number of features, this is the reason for slow performance in IE8.
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.
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/
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).
I am looking at using HTML5 Canvas element for my upcoming project. I want to know what all major browsers (including the versions!, cos i know that the latest builds do support canvas) support the Canvas tag. I don't give a damn about IE. So don't bother reporting IE. :) In this tutorial Drawing shapes - MDC, the quadraticCurveTo section says:
quadraticCurveTo(cp1x, cp1y, x, y) //
BROKEN in Firefox 1.5 (see work around
below)
Does that mean that Canvas is supported on Firefox 1.5 and above too?
caniuse.com lists browser support for many different features, including canvas.
Specifically, browser support for canvas is listed at caniuse.com/#search=canvas.
It's not only about "supporting Canvas", but about the bugs that each implementation has about this and missing methods that have been added since the initial release. So even if one version of Firefox does add the basic Canvas support, it might have some bugs that make it impossible to use it in your application.
In that case, you might need to check the current versions and then go back as far as you want to support to verify if they work as expected.