¿Código condicional para mostrar PNG en lugar de SVG para navegadores antiguos?

Question

Estoy buscando una forma de que los navegadores más antiguos muestren una imagen PNG en lugar de un SVG como una alternativa cuando se detectan. El logotipo de mi sitio se encuentra actualmente en SVG, pero los navegadores más antiguos, específicamente IE 8 y versiones posteriores, no lo renderizarán. Ya tengo el logo en PNG. ¿Cuál es la mejor manera de ejecutar esto?

Gracias

Answer 1

Use los comentarios condicional de 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

Si también está buscando una manera de manejar esto para los navegadores que no sean IE, usted debe comprobar el agente de usuario con javascript o php.

Answer 2

sugiero volver a escribir el atributo src de sus imágenes SVG cuando detecte (a través de Modernizr o similar) que el navegador no soporta SVG de forma nativa. Algo así como:

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"; 
     } 
    } 
} 

Answer 3

utilizo the "transparent gradient" technique porque es de sólo CSS y no requiere cortes específicas del navegador.

La técnica se basa en el hecho de que los navegadores que pueden usar degradados CSS son lo suficientemente modernos como para admitir la representación SVG. Por lo tanto, si utilizamos una imagen de fondo compuesta por dos capas, una SVG y otra gradiente, solo aquellos navegadores capaces de comprender la sintaxis de gradiente intentarán mostrar el SVG.

El código siguiente muestra las reglas básicas de 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); 

Con esta técnica, todos los usuarios podrán ver la imagen y se mostrará el uso de SVG para las últimas versiones de navegadores. El precio a pagar es que algunas versiones antiguas del navegador (como IE9 o Firefox 3.5) que también son capaces de renderizar SVG pero que no admiten gradientes mostrarán la versión alternativa.

Answer 4

Para realizar un seguimiento del comentario de Adiabatic: También podría establecer la ruta de img de respaldo como atributo de datos. Esto permite una mayor flexibilidad en sus rutas de respaldo.

Ejemplo (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> 

Answer 5

¿Qué tal esto?

<img src="your.svg" onerror="this.src=your.png"> 

también echar un vistazo a SVGeezy.

Answer 6

Prefiero la técnica de "comentarios condicional SVG fallback" para imágenes de contenido, como describe David Goss, si las imágenes no son una decoración.

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/

Para imágenes decorational, uso la "técnica de retorno transparente gradiente SVG", como se describe por 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

Answer 7

Este método funcionó para mí:

<?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"; 

} 
?> 

Por defecto le está diciendo a la variable "$ extensión" para ser PNG, pero si el navegador la versión es capaz de renderizar SVG, entonces la variable cambiará a SVG.

Luego, en su HTML solo completa la extensión de archivo haciendo un eco de la variable.

<img src="image.<?php echo $extension ?>"> 

Ahora su página web cargará "image.png" o "image.svg" dependiendo de la versión del navegador.

Información adicional:

** con el fin de hacer que esto funcione secuencia de comandos que necesita para configurar el browscap.ini archivo para que pueda utilizar el "get_browser" función de PHP.

** capacidades de navegador con respecto a SVG se obtuvieron de este sitio web:

https://caniuse.com/#search=svg