Code conditionnel pour afficher PNG à la place de SVG pour les anciens navigateurs?

Je suis à la recherche d'un moyen d'avoir les anciens navigateurs d'afficher une image au format PNG à la place d'un SVG comme une solution de secours quand il est détecté. Le logo de mon site est actuellement en SVG, mais les navigateurs plus anciens, plus précisément IE 8 et ci-dessous ne sont pas rendues. J'ai déjà le logo en PNG. Quelle est la meilleure façon d'exécuter cette?

Grâce

source d'informationauteur Charlie

  1. 15

    Utiliser du code HTML de commentaires conditionnels.

    <!--[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 vous êtes également à la recherche d'un moyen de gérer cela pour les navigateurs autre que IE, vous devez vérifier l'agent de l'utilisateur avec le javascript ou le php.

  2. 5
    <object type="image/svg+xml" data="image.svg">
    <img src="image.png" alt="image"/>
</object>
  3. 3

    - Je utiliser le "dégradé transparent" techniquecar il est en CSS uniquement et ne nécessite pas spécifiques à un navigateur hacks.

    La technique est basée sur le fait que les navigateurs capables d'utiliser des gradients CSS sont assez moderne à l'appui de rendu SVG. Donc, si nous utilisons une image de fond qui est composé de deux couches, l'une étant le SVG et l'autre étant un gradient, seuls les navigateurs capables de comprendre le gradient de la syntaxe essayez d'afficher le SVG.

    Le montre le code suivant de la base de règles 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);

    Avec cette technique, tous les utilisateurs de voir l'image et elle sera affichée à l'aide de SVG pour les dernières versions du navigateur. Le prix à payer est que certaines anciennes versions de navigateurs (tels que IE9 ou Firefox 3.5) qui sont également capables de rendu SVG, mais ne prennent pas en charge les gradients d'affichage de secours version.

  4. 2

    Je suggère de réécrire les src attributs de vos images SVG lorsque vous détectez (via Modernizr ou similaire) que le navigateur ne prend pas en charge le format SVG en natif. Quelque chose comme:

    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";
        }
    }
}
  5. 2

    Comment à ce sujet? 

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

    Aussi jeter un oeil à SVGeezy.

  6. 0

    Pour le suivi Adiabatique du commentaire:
    Vous pouvez également définir le secours img chemin que l'attribut data -. Cela permet plus de flexibilité dans votre secours des chemins.

    Exemple (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>
  7. 0

    Je préfère les "commentaires conditionnels SVG de secours technique" pour le contenu des images, tel que décrit par David Goss, si les images sont pas de la décoration.

    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/

    Pour decorational images, j'utilise le "dégradé transparent SVG de secours technique", comme décrit par 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

  8. -1

    Cette méthode a fonctionné pour moi:

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

}
?>

    Par défaut en vous disant que la variable"$extension" pour être en PNG, mais si la version de votre navigateur est capable de rendu SVG, alors la variable qui va changer à SVG.

    Ensuite dans votre code HTML que vous venez de terminer l'extension de fichier en faisant un echo de la variable. 

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

    Maintenant votre page web se charge "de l'image.png" ou "de l'image.svg" selon la version de votre navigateur.

    Informations importantes:

    ** afin de rendre ce script fonctionne, vous devez configurer le fichier browscap.ini de sorte que vous pouvez utiliser la fonction PHP "get_browser".

    ** Les capacités d'un navigateur concernant SVG ont été obtenus à partir de ce site:

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