Which SVG support detection method is best?

Question

Somebody has already asked my question about detecting SVG support in browsers but there are three leading solutions and not a lot of discussion about the merits of each.

So: which, if any, is best? In terms of portability and correctness, that is. False negatives (i.e. "no svg") are undesirable, but acceptable; false positives are not.

Exhibit A:

var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';

var img = document.createElement('img')

img.setAttribute('src',testImg);

return img.complete;

Exhibit B:

return document.implementation.hasFeature(
    "http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");

Exhibit C:

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

What are your fitness criteria for 'best'? Perhaps you should modify your question and title to ask specific, answerable questions like _"Will any of these fail (return a false negative or positive) in any browsers released in the last 3 years?"_ or some such. Otherwise this question is ripe for closing as subjective. — Phrogz, Mar 13 '12 at 18:39
Exhibit B is [deprecated](https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/hasFeature). — Lonnie Best, Dec 24 '19 at 15:44

score 39 · Answer 1 · edited Dec 24 '19 at 15:37

39

No need to include the entire Modernizr library for this. Here's a simple check that I've used in the past:

typeof SVGRect !== "undefined"; // true if supported, false if not

This quite simply checks for support of the SVGRect object which is defined in the SVG Specification. In Chrome, typeof SVGRect is "function" and in IE9 it's "object", but in browsers which do not support SVG (IE8, for instance) this returns "undefined".

With the above code, you can simply:

if (typeof SVGRect !== "undefined") { ... /* If the browser does support SVG. */ }
else { ... /* If the browser does not support SVG. */ }

edited Dec 24 '19 at 15:37

Lonnie Best

9,936
10
57
97

answered Jan 30 '15 at 15:37

James Donnelly

126,410
34
208
218

Is this an accurate test for determining if the browser supports svg within an img tag? ``? Are there browsers that support svg images via `img src`, while also NOT supporting the modern API for programmatically drawing them? – Lonnie Best Dec 24 '19 at 15:57

score 2 · Answer 2 · answered Nov 05 '14 at 09:44

Currently, Modernizr uses approach B to detect for support for SVGs in <img> tags, and approach C to detect for support for SVGs in <embed> and <object> tags. It seems it used to use an approach that was more like A for detecting for "SVG as img" support, but that was dropped in favour of B (for more detail, see this post on CSS-tricks).

Consequently, it seems that at the moment, either B or C would be the best approach, depending on what exactly you want to test for.

score 1 · Accepted Answer · edited Jul 17 '16 at 00:33

1

I would probably use modernizr.

edited Jul 17 '16 at 00:33

DᴀʀᴛʜVᴀᴅᴇʀ

7,681
17
73
127

answered Mar 13 '12 at 17:50

mbx-mbx

1,765
11
23

11

Looks like that's the same as C underneath. – spraff Mar 13 '12 at 17:58
2

Not a very useful answer, unless you care to explain which method modernizr uses and why it is better. Feature detection need not rely on a library, and the library must use some sort of detection itself. – Derek Henderson Aug 21 '15 at 16:12

Which SVG support detection method is best?

3 Answers3

Linked

Related