How to check if browser supports svg with javascript?

Question

I'm using svg animations on my website, but it also have to run in older browsers, which do not support svg. I could solve this with a redirect to a static page.

But is it even possible to detect if the Browser supports svg's with the help of javascript?

Any help would be appreciated.

Did you not research? http://stackoverflow.com/questions/9689310/which-svg-support-detection-method-is-best — epascarello, Dec 19 '14 at 14:32
http://caniuse.com/#search=svg Have a look at the ressource tab. — Christoph, Dec 19 '14 at 14:32
http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser — manowar_manowar, Dec 19 '14 at 14:33

PlantTheIdea · Answer 1 · 2014-12-19T14:38:12.013

8

I did a lot of searching on this myself a while back, when I was building the $.supports() section of my bolster augmentation library. Here is what i settled on:

canSvg = !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect);

Tested on IE8+, works just fine.

EDIT

@SinaSadrzadeh makes an excellent point, and Modernizr is a fantastic resource. I recommend you use Modernizr for your project if you aren't already, but especially if SVG is not the only thing to test. If SVG is the only thing you are testing, bringing in an entire library is not necessary for that, but it doesn't allow for a lot of extensibility.

edited Dec 19 '14 at 14:38

answered Dec 19 '14 at 14:32

PlantTheIdea

16,061
5
35
40

that's write, but you can customize what you want to be in modernizr package here [modernizr download builder](http://modernizr.com/download/) – sadrzadehsina Dec 19 '14 at 14:42
1

@SinaSadrzadeh - but again, if all he needs is to test for a single item (which is an unlikely scenario, but still) ... explain to me how a separate file can ever be faster than the single line of JS I've provided. – PlantTheIdea Dec 19 '14 at 14:43
It's ok man :), I'm agree with you. this is just another aspect of modernizr. – sadrzadehsina Dec 19 '14 at 14:45
@PlantTheIdea After a while this is the optimal solution, it's short, easy to use and does what it is supposed. Thanks again! – p2or Jan 10 '15 at 22:23
@PlantTheIdea Agree. No need to import an entire library to test only SVG support – Raja Khoury Oct 08 '15 at 20:07

score 4 · Accepted Answer · answered Dec 19 '14 at 14:35

4

You can take advantage of a very useful library called modernizr

After including it simply write something like this:

if (!Modernizr.svg) {
  // svg fallback
}

answered Dec 19 '14 at 14:35

sadrzadehsina

1,331
13
26

1

I added some verbiage to my answer, because Modernizr is always a good option. If he only needs to test for SVG, though, then its using a sledgehammer to hammer a nail. – PlantTheIdea Dec 19 '14 at 14:39

How to check if browser supports svg with javascript?

2 Answers2