Codice condizionale per la visualizzazione di PNG al posto di SVG per i browser più vecchi?

Question

Sto cercando un modo per far sì che i browser più vecchi visualizzino un'immagine PNG al posto di un file SVG come fallback quando rilevato. Il logo del mio sito è attualmente in SVG, ma i browser più vecchi, in particolare IE 8 e seguenti, non lo renderanno. Ho già il logo in PNG. Qual è il modo migliore per eseguire questo?

Grazie

Answer 1

Usa HTML commenti condizionali.

<!--[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

Se siete anche alla ricerca di un modo per gestire questo per browser diversi da IE, si dovrebbe verificare l'user agent con javascript o php.

Answer 2

suggerisco riscrivere l'attributo src delle immagini SVG quando si rileva (tramite Modernizr o simili) che il browser non supporta nativamente SVG. Qualcosa di simile:

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

io uso the "transparent gradient" technique perché è CSS-only e non richiede hack specifiche del browser.

La tecnica si basa sul fatto che i browser in grado di utilizzare i gradienti CSS sono abbastanza moderni da supportare il rendering SVG. Quindi, se usiamo un'immagine di sfondo composta da due livelli, uno essendo l'SVG e l'altro un gradiente, solo i browser in grado di comprendere la sintassi del gradiente proveranno a visualizzare SVG.

Il codice seguente mostra le regole di base 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 questa tecnica, tutti gli utenti vedranno l'immagine e questo verrà visualizzato utilizzando SVG per le ultime versioni dei browser. Il prezzo da pagare è che alcune vecchie versioni del browser (come IE9 o Firefox 3.5) che sono anche in grado di mostrare SVG ma non supportano le sfumature mostreranno la versione di fallback.

Answer 4

Per dare seguito al commento di Adiabatic: È anche possibile impostare il percorso img di fallback come attributo dei dati. Ciò consente una maggiore flessibilità nei percorsi di fallback.

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

ne dici di questo?

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

prendere anche uno sguardo a SVGeezy.

Answer 6

Preferisco la "tecnica di fallback di commenti commenti SVG" per le immagini dei contenuti, come descritto da David Goss, se le immagini non sono decorative.

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/

Per le immagini decorational, utilizza la tecnica "fallback trasparente gradiente SVG", come descritto da 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

Questo metodo ha funzionato per me:

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

} 
?> 

per difetto si stanno dicendo la variabile "$ estensione" di essere PNG, ma se il browser la versione è in grado di rendere SVG, quindi la variabile cambierà in SVG.

Quindi nel codice HTML è sufficiente completare l'estensione del file facendo eco della variabile.

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

Ora la tua pagina web caricherà "image.png" o "image.svg" a seconda della versione del browser.

Informazioni importanti:

** al fine di rendere questo lavoro lo script è necessario impostare il file Browscap.ini modo da poter utilizzare la "get_browser" funzione PHP.

** funzionalità browser Per quanto riguarda SVG sono stati ottenuti da questo sito:

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