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

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

12 голосов
/ 07 ноября 2010

В настоящее время я делаю редизайн веб-сайта, в основном просто обновляю его до более современного вида и пытаюсь сделать его максимально независимым от разрешения, и во имя независимости от разрешения я решил, что попробуйте использовать изображения 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 */
}

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

Ответы [ 5 ]

4 голосов
/ 15 мая 2011

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

3 голосов
/ 25 февраля 2013

Хорошее обсуждение / сравнение методов здесь: 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")
3 голосов
/ 07 ноября 2010

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

1 голос
/ 07 ноября 2010

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

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

0 голосов
/ 07 ноября 2010

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

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

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

...