Я ищу способ, чтобы старые браузеры отображали изображение PNG вместо SVG как резерв при обнаружении. Логотип для моего сайта в настоящее время находится в SVG, но старые браузеры, особенно IE 8 и ниже, не будут отображать его. У меня уже есть логотип в PNG. Какой лучший способ выполнить это?
Спасибо
Использовать условные комментарии HTML.
<!--[if lte IE 8]><img src="logo.png" /><![endif]-->
<!--[if gt IE 8]><img src="logo.svg" /><![endif]-->
<!--[if !IE]> --><img src="logo.svg" /><!-- <![endif]-->
http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
Если вы также ищете способ справиться с этим для браузеров, отличных от IE, вы должны проверить агент пользователя с помощью javascript или php.
<object type="image/svg+xml" data="image.svg">
<img src="image.png" alt="image"/>
</object>
Я предлагаю переписать атрибут src ваших SVG-изображений, когда вы обнаружите (через Modernizr или аналогичный), что браузер не" t поддерживает SVG изначально. Что-то вроде:
if (!Modernizr.svg) {
var imgs = document.getElementsByTagName('img');
var endsWithDotSvg = /.*\.svg$/
var i=0;
var l = imgs.length;
for (; i != l; ++i) {
if (imgs[i].src.match(endsWithDotSvg)) {
imgs[i].src = imgs[i].src.slice(0, -3) + "png";
}
}
}
Я использую метод "прозрачного градиента" , потому что это только CSS-код и не требует взлома для браузера.
Этот метод основан на том факте, что браузеры, способные использовать градиенты CSS, достаточно современны для поддержки SVG-рендеринга. Итак, если мы используем фоновое изображение, состоящее из двух слоев, одно из которых является SVG, а другое - градиентом, только те браузеры, которые могут понять синтаксис градиента, попытаются отобразить SVG.
В следующем коде показаны основные правила CSS:
background: transparent url(fallback-image.png) center center no-repeat;
background-image: -webkit-linear-gradient(transparent, transparent), url(vector-image.svg);
background-image: -moz-linear-gradient(transparent, transparent), url(vector-image.svg);
background-image: linear-gradient(transparent, transparent), url(vector-image.svg);
С помощью этой технологии все пользователи будут видеть изображение, и оно будет отображаться с помощью SVG для последних версий браузера. Плата за то, что некоторые старые версии браузера (например, IE9 или Firefox 3.5), которые также способны визуализировать SVG, но не поддерживают градиенты, покажут резервную версию.
Как насчет этого?
<img src="your.svg" onerror="this.src=your.png">
Также посмотрите SVGeezy.
Чтобы следить за адиабатическим комментарием: Вы также можете установить резервный путь img как атрибут данных. Это позволяет увеличить гибкость ваших резервных путей.
Пример (HTML + JS):
<object type="image/svg+xml" data="image.svg" data-fallback="image.png"></object>
<script>
if (!Modernizr.svg) {
var imgs = document.getElementsByTagName('img');
var endsWithDotSvg = /.*\.svg$/
var i=0;
var l = imgs.length;
for (; i != l; ++i) {
if (imgs[i].src.match(endsWithDotSvg)) {
var fallback = imgs[i].getAttribute('data-fallback');
if(typeof fallback !== "undefined" && fallback !== "")
{
imgs[i].src = fallback;
}
}
}
}
</script>
Я предпочитаю "условные комментарии метода SVG-возврата" для изображений содержимого, как описано Дэвидом Госс, если изображения не украшены.
HTML:
<a class="site-logo" href="/">
<!--[if gte IE 9]><!--><img alt="Acme Supplies" src="logo.svg" data-fallback="logo.png" onerror="this.src=this.getAttribute('data-fallback');this.onerror=null;" /><!--<![endif]-->
<!--[if lt IE 9]><img alt="Acme Supplies" src="logo.png" /><![endif]-->
</a>
http://davidgoss.co.uk/2013/01/30/use-svg-for-your-logo-and-still-support-old-ie-and-android/
Для декоративных образов я использую "прозрачную градиентную технику возврата SVG", как описано Pau Giner.
CSS
.icon-file {
background: transparent url(../images/file.png) center center no-repeat;
background-image: -webkit-linear-gradient(transparent,transparent), url(../images-svg/file.svg);
background-image: -o-linear-gradient(transparent,transparent), url(../images-svg/file.svg);
background-image: -moz-linear-gradient(transparent,transparent), url(../images-svg/file.svg);
background-image: -ms-linear-gradient(transparent,transparent), url(../images-svg/file.svg);
background-image: linear-gradient(transparent,transparent), url(../images-svg/file.svg);
background-size: 100%;
}
http://pauginer.com/post/36614680636/invisible-gradient-technique
Этот метод работал у меня:
<?php
$browser = get_browser(null, true);
$extension = "png";
if ($browser['browser'] == "Chrome" && $browser['version'] >= 49){
$extension = "svg";
}else if($browser['browser'] == "Firefox" && $browser['version'] >= 57){
$extension = "svg";
}else if($browser['browser'] == "Opera" && $browser['version'] >= 49){
$extension = "svg";
}else if($browser['browser'] == "IE" && $browser['version'] >= 11){
$extension = "svg";
}else if($browser['browser'] == "Safari" && $browser['version'] >= 11){
$extension = "svg";
}
?>
По дефекту вы указываете переменную "$ extension" как PNG, но если версия браузера способна отображать SVG, тогда переменная изменится на SVG.
Затем в вашем HTML вы просто заполните расширение файла, сделав эхо переменной.
<img src="image.<?php echo $extension ?>">
Теперь ваша веб-страница загрузит "image.png" или "image.svg" в зависимости от версии браузера.
Важная информация:
**, чтобы выполнить эту работу script, вам нужно настроить файл browscap.ini, чтобы вы могли использовать функцию PHP "get_browser".
** Возможности браузера в отношении SVG были получены с этого веб-сайта: