Detect SVG Support

[samanime]

Hi all,

Does anyone know a reliable method for detecting SVG support in a browser, using Javascript?

I only found one solution, and it was apparently outdated (didn't even have IE8 support yet) and seemed as large as the jQuery library...

While we're at it, does anyone know how to check for canvas support as well? I'm fairly certain that it's much simpler, but while we're on the topic I might as well ask.

Thanks.

[AussieJohn]

Often when I'm doing feature detection I turn to Modernizr :-)

http://www.modernizr.com/download/#-canvas-svg

A custom build with feature detection for only the things you want to test for is usually pretty small.

What are you trying to build? There are several canvas libraries out there that might be able to help you out.

[samanime]

Basically a simple graphing library that natively supports canvas and SVG (without any kind of shiv) in order to be able to target pretty much every modern browser and mobile device. I've hunted all around and haven't found anything that fits my needs. It usually uses one or the other.

If you know something that would speed up my process, that'd be great. =)

I'll check out Modernizr in the mean time. Thanks.

[AussieJohn]

I've had a look in to using gRaphael (which is an extension of Raphael JS).

Another avenue I've explored is jqPlot - a jQuery plugin that can be used to plot and chart graphs. (It generates Canvas graphs and requires you to include the ExCanvas library to bring canvas functionality to IE8 and below)

Hope these help :-)

[samanime]

Thanks. I'll take a look at those. Raphael is just a JS graphics library, right? (i.e., would it be overkill if I had jQuery loaded also, which is a common requirement).

I think I looked at jqPlot before and it didn't work well on mobile... but I don't remember looking at that site, so I may be thinking of something else. Neither of them "officially" support mobile either, but hopefully they'll work anyways.

Thanks. =)

One other idea I really liked was this: http://filamentgroup.com/lab/update_...esigning_with/ which does it in an accessible way by reading an HTML table and generating a graph. None of the others do that (though it isn't hard to parse a table into the correct data, I did it with the Google Graphing API =p).

Also, I would like to use SVG when it's available, since I (think) for my purposes it would perform better than canvas (though not 100% sure on this one, need to do more testing).




And if it was self-programming that would be even better. XD (Yes, I have a lot of requirements... geez).

[AussieJohn]

Thanks. I'll take a look at those. Raphael is just a JS graphics library, right? (i.e., would it be overkill if I had jQuery loaded also, which is a common requirement).

It calls itself a graphics library, but specifically it deals with vector graphics for canvas.

It's only overkill to load in a library if you really don't need to ;-)

I know that's a bit of a vague answer of course. If you're using a fair bit of jQuery then it's worth keeping... if the only thing you're doing is setting 2 click handlers, then it would be overkill.

Regarding performance, creating a graph is probably not so taxing on any one device that you would necessarily notice any performance gains between SVG over Canvas (unless you're live-updating and animating a pretty full on graph).

I've seen that plugin on Filament Group before I think. It looks like a good idea to do it that way, since you'd always at least have an accessible fallback :-)

[samanime]

For the library question, of course. =) I basically meant "Raphael doesn't do the same type of stuff as jQuery, right?", which is sounds like it doesn't. =p

The only problem with the Visualize one is it doesn't work on mobile (it's SVG-based).

The problem is that I won't have just one graph, but probably several (at least a half dozen) as well as an element which uses a pretty hefty canvas element (it's hefty enough that I'm going to probably have to implement proper culling =p). Of course, this could (should, and probably will) involve looking at the workflow again (especially for mobile devices). This is a rather hefty project that we're beginning, so I want to keep the basic as trim as possible to give us as much wiggle room as we may need later on.

It looks like if I went the canvas-only route, with a shim for for IE <= 8, I should cover just about everything. The only thing I'm not sure about is Android 2.0 (which doesn't support canvas) and other devices (couldn't find stats for Blackberry and WebOS).

... I think now I've officially stepped into way-too-OCD-territory. =p

Canvas only it is!

Thanks for the help. =)