Kod warunkowy wyświetlania PNG zamiast SVG dla starszych przeglądarek?

Question

Szukam sposobu, aby starsze przeglądarki wyświetlały obraz PNG zamiast SVG jako awarię po wykryciu. Logo mojej witryny jest obecnie w SVG, ale starsze przeglądarki, w szczególności IE 8 i poniżej, nie będą go renderować. Mam już logo w PNG. Jaki jest najlepszy sposób na wykonanie tego?

Dzięki

Answer 1

Używaj warunkowych komentarzy 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

Jeśli jesteś również szukają sposobu, aby obsłużyć to dla przeglądarek innych niż IE, należy sprawdzić agenta użytkownika z javascript lub php.

Answer 2

Proponuję przepisywanie atrybut obrazów SVG src gdy wykryje (przez Modernizr lub podobny), że przeglądarka nie obsługuje SVG natywnie. Coś jak:

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

używam the "transparent gradient" technique bo to jest CSS-tylko i nie wymaga hacki konkretnej przeglądarki.

Technika polega na tym, że przeglądarki obsługujące gradienty CSS są na tyle nowoczesne, że obsługują renderowanie SVG. Jeśli więc użyjemy obrazu tła, który składa się z dwóch warstw, z których jedna to SVG, a druga jest gradientem, tylko te przeglądarki, które są w stanie zrozumieć składnię gradientu, spróbują wyświetlić SVG.

Poniższy kod przedstawia podstawowe zasady 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); 

Dzięki tej technice, wszyscy użytkownicy będą widzieć obraz, a zostanie on wyświetlony za pomocą SVG dla najnowszych wersji przeglądarek. Cena do zapłaty jest taka, że ​​niektóre stare wersje przeglądarek (takie jak IE9 lub Firefox 3.5), które są również zdolne do renderowania SVG, ale nie obsługują gradientów, będą wyświetlały wersję zastępczą.

Answer 4

Aby śledzić komentarz Adiabatic: Można również ustawić zastępczą ścieżkę img jako atrybut danych. Pozwala to na większą elastyczność w ścieżkach zastępczych.

Przykład (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

Jak chodzi?

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

Zobacz także SVGeezy.

Answer 6

Preferuję technikę "warunkowego komentarza SVG" w przypadku obrazów treści, zgodnie z opisem Davida Gossa, jeśli obrazy nie są dekoracją.

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/

Na decorational obrazów używać "przezroczysty gradientu SVG awaryjnej techniki", jak opisane przez 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

Metoda ta pracował dla mnie:

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

} 
?> 

Przez wadę mówisz zmiennej "$ rozszerzenie" być PNG, ale jeśli przeglądarce Wersja jest w stanie renderować SVG, wtedy zmienna zmieni się na SVG.

Następnie w HTML wystarczy uzupełnić rozszerzenie pliku, tworząc echo zmiennej.

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

Teraz Twoja strona internetowa załaduje "image.png" lub "image.svg" w zależności od wersji przeglądarki.

Ważne informacje:

** aby uczynić ten skrypt trzeba skonfigurować Browscap.ini plików, dzięki czemu można korzystać z funkcji PHP „get_browser”.

** możliwości przeglądarki dotyczących SVG zostały uzyskane z tej strony:

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