Надежное обнаружение поддержки тегов <img> для SVG

В настоящее время я делаю редизайн веб-сайта, в основном просто обновляя его до более современного вида и стараясь сделать его максимально независимым от разрешения, и во имя независимости от резолюции я решил, что попробуйте использовать SVG-изображения в дизайне, где браузер поддерживает SVG-изображения в тегах <img>. Причина, по которой я хочу просто использовать SVG в тегах <img>, а не использовать какое-то более амбициозное решение, заключается в том, что AFAIK Chrome, Opera и Safari поддерживают его, а FF4 кажется, что он может, наконец, получить его также в сочетании с тем, что весь сайт построен на пользовательской CMS, который должен быть частично перезаписан, чтобы начать изменять выходной HTML (в настоящее время он поддерживает пользовательские изображения дизайна, пользовательский CSS и настраиваемый JS для каждой темы).

Теперь я немного огляделся по сети, пытаясь понять, как это сделать, и почему-то почти все предлагаемые решения, которые я нашел, плохо работали (один обнаружил FF3.x как поддерживающий SVG в тегах <img>, чтобы они не отображались должным образом там, еще один никогда не пытался вообще, несколько были слишком сложными "заменить все изображения на SVG, если есть поддержка для него", которые тоже не будут работать слишком хорошо.

То, что я ищу, - это действительно небольшой фрагмент, который можно назвать таким (кстати, я использую JQuery с этой новой темой для сайта):

if(SVGSupported()) {
    $('#header img#logo').attr('src','themes/newTheme/logo.svg');
    /* More specified image replacements for CSS and HTML here */
}

У кого-нибудь действительно есть рабочее решение для этого, которое не дает неточной продукции? Если так, я был бы очень благодарен.

Ответ 1

Это, как представляется, окончательный ответ: Javascript: как я могу отложить возврат значения для img.complete. Если кто-то не придумает что-то, дающее немедленные результаты.

Ответ 2

Для старых браузеров вы можете использовать тег <object> или <iframe>, но это нехорошее решение. Firefox и IE9 (не знают о других браузерах) теперь внедрили встроенный svg, который можно легко обнаружить:

// From the Modernizr source
var inlineSVG = (function() {
  var div = document.createElement('div');
  div.innerHTML = '<svg/>';
  return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
})();

if( inlineSVG ){
  alert( 'inline SVG supported');
}

Итак, вы можете заменить все изображения на теги svg. И я надеюсь, но мне нужно сделать это на Google, что каждый браузер, поддерживающий встроенный svg, будет поддерживать svg в качестве источника изображения.

Ответ 3

Хорошее обсуждение/сравнение методов находится здесь: http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images

Основываясь на этой странице, я закончил с помощью этого:

svgsupport = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")

Ответ 4

Я имел в виду написать сообщение в блоге об этом, но вот фрагмент, который должен работать:

function SVGSupported() {
    var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
    var img = document.createElement('img')
    img.setAttribute('src',testImg);

    return img.complete; 
}

Основываясь на script от Alexis "Fyrd" Deveria, опубликовал в своем блоге Opera.

Я использую что-то похожее в своем блоге, которое вы можете увидеть здесь: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/

Он будет использовать <img>, если поддерживается; если нет, и мы не в IE, он будет использовать обычный тег объекта; в противном случае он будет использовать тег объекта, специально созданный для svg-web. fakesmil используется для анимации градиента. Кажется, он работает везде, где я его тестировал. script, который выполняет работу для этого примера, можно найти здесь: http://blog.echo-flow.com/media/js/svgreplace.js

Ответ 5

Используйте <object> -Tags для отображения SVG. См. http://caniuse.com/svg-img и http://www.w3schools.com/svg/svg_inhtml.asp

Firefox 3.x также может отображать SVG-изображения, а не встроенные SVG. Я не уверен в том, что в других браузерах нет. FF4 также разрешит встроенные SVG.

С помощью <object> -Tag вы также можете включить альтернативное PNG-отображение изображений, если браузер не поддерживает отображение SVG.