Надежное определение поддержки тегов ‹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 */
}

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


javascript svg image jquery browser-feature-detection
person mludd    schedule 07.11.2010    source источник

Ответы (5)


arrow_upward
4
arrow_downward

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

person Witiko    schedule 15.05.2011

arrow_upward
3
arrow_downward

Для старых браузеров вы можете использовать тег <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. И я надеюсь, но мне нужно погуглить, что каждый браузер, поддерживающий встроенный svg, будет поддерживать svg в качестве источника изображения.

person Harmen    schedule 07.11.2010
comment
Я пробовал это, но он возвращает false в Firefox, Safari 5.x и Opera, хотя и Safari, и Opera могут отображать изображения SVG в тегах <img>, поэтому, боюсь, это не работает. - person mludd; 07.11.2010

arrow_upward
3
arrow_downward

Хорошее обсуждение / сравнение методов здесь: 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")
person Julian    schedule 25.02.2013

arrow_upward
1
arrow_downward

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

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

    return img.complete; 
}

По сценарию Алексиса «Фирда» Девериа, размещенному в его блоге Opera.

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

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

person jbeard4    schedule 07.11.2010
comment
На самом деле это одно из решений, которые я видел в Интернете и которые я пробовал, к сожалению, оно не работает в Safari, но работает с Opera. Safari выдает предупреждение о том, что ресурс (шведская версия Safari, поэтому не знаю, насколько шаткий перевод) интерпретируется как изображение, но передается как image / svg + xml ... - person mludd; 07.11.2010

arrow_upward
-3
arrow_downward

Используйте <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.

person Kissaki    schedule 07.11.2010
comment
-1. Это не отвечает на вопрос ОП. Есть причины, по которым img предпочтительнее, и обнаружение поддержки тегов img является общей проблемой. - person jbeard4; 07.11.2010
comment
Ммм, ты прав. Так что это был скорее совет по его введению, в котором также говорилось о проблемах с отображением SVG. - person Kissaki; 07.11.2010