Какой метод обнаружения SVG лучше всего?

Кто-то уже спросил мой вопрос об обнаружении поддержки SVG в браузерах, но есть три ведущих решения, а не много обсуждений по достоинству каждого из них.

Итак: что, если вообще, лучше? Что касается переносимости и правильности, то есть. Ложные негативы (т.е. "Нет svg" ) нежелательны, но приемлемы; ложных срабатываний нет.

Иллюстрация A:

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

var img = document.createElement('img')

img.setAttribute('src',testImg);

return img.complete;

Иллюстрация B:

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

Иллюстрация C:

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

Ответ 1

Я бы, вероятно, использовал modernizr.

Ответ 2

Не нужно включать всю библиотеку Modernizr для этого. Вот простая проверка, которую я использовал в прошлом:

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

Это довольно просто проверяет поддержку объекта SVGRect, который определен в Спецификация SVG. В Chrome typeof SVGRect есть "function", а в IE9 - "object", но в браузерах, которые не поддерживают SVG (например, IE8), это возвращает "undefined".

С помощью приведенного выше кода вы можете просто:

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

Ответ 3

В настоящее время Modernizr использует подход B для обнаружения поддержки SVG в тегах <img> и приближается к C для обнаружения поддержки SVG в тегах <embed> и <object>. Похоже, что он использовал подход, который был больше похож на A для обнаружения поддержки "SVG как img", но это было отброшено в пользу B (более подробно см. этот пост в CSS-трюках).

Следовательно, кажется, что на данный момент лучшим вариантом будет либо B, либо C, в зависимости от того, что именно вы хотите проверить.