Pracuję nad responsywnym projektem i myślę o tworzeniu ikon nawigacji jako plików .svg. Jakie jest aktualne wsparcie dla przeglądarek i czy istnieje obejście/plugin dla starszych wersji przeglądarek?. Obsługa przeglądarek SVG
Wszystkie najważniejsze przeglądarki miały wsparcie przez lata z wyjątkiem < = IE8. Obejście może być na przykład RaphaelJS.
Źródła:
Warto zauważyć, jeśli nie trzeba < = wsparcie IE8, można zaimplementować GoogleChromeFrame dość łatwo uzyskać wsparcie SVG, którego szukasz dla ...
Chociaż może się okazać, że każda przeglądarka ma swoje własne dziwactwa z odpowied t do funkcji specyfikacji. Miałem problemy z dynamicznie tworzonymi węzłami, które używają filtrów, a animateMotion został błędnie wprowadzony w Google Chrome zbyt długo ... (używamy FF5 + jako naszych interaktywnych interfejsów, dlatego też Safari jest coraz lepsza)
IMO , chyba że cała aplikacja to SVG, po prostu użyłbym PNG do twoich ikon, chyba że chcesz, żeby ładnie się skalowały! :)
... ale jeśli chcesz po prostu grać z SVG, Giv'er! ;)
Możesz równie dobrze wykorzystać SVG dla wszystkich obrazów. W ten sposób pokryjesz wszystkie rzeczy związane z siatkówką na iDevices. Inne urządzenia będą prędzej czy później.
Dla przeglądarek, które nie obsługują formatu SVG, można nadać treści klasie "no-svg".
W swojej css wystarczy dodać”.yourimageclass .no-svg i umieścić png zamiast. (Nadpisać)
Gotowa HTML5 daje tej klasy nie-svg już domyślnie niektóre javascript magii. (np. dla IE8)
The SVG spec jest rozbudowany i żadna przeglądarka nie obsługuje obecnie całej specyfikacji. Biorąc to pod uwagę, all the latest versions of all the major browsers have basic SVG support. Ponieważ żadna z nich nie ma pełnej obsługi, musisz sprawdzić poszczególne funkcje w każdej wyszukiwanej przeglądarce. Jeśli rysujesz tylko proste kształty i nie używasz bardziej zaawansowanych funkcji (takich jak filtry, animacje itp.), Prawdopodobnie nie będziesz mieć problemów.
A full browser compatibility matrix can be found here.
Sposób obejścia dla starszych wersji IE polega na użyciu VML. Jeśli wymagane jest wsparcie dla IE6 i rysujesz za pomocą kodu, to Raphael.js zrobi to za Ciebie i wyrenderuje przy użyciu VML lub SVG. Ale jeśli ładujesz surowy plik SVG i używasz go jako źródła obrazu, które nie działa.
Inną opcją dla starych przeglądarek jest użycie canvg JavaScript library. Jest to czysty parser JavaScript SVG, który wyrenderuje wynikowy obraz na płótnie, ale może to być przesada.
PS, może zostać spójrz także na ikony-czcionki (http://css-tricks.com/examples/IconFont/) – sym3tri
Dla obrazów tła, oto prosty sposób na awaryjne do PNG tła dla starszych przeglądarek:
http://signaltower.co/2013/02/25/add-png-fallbacks-for-svg-files/
To łącze zwraca 404 – SPRBRN
edycja: Kiedyś odwołuje się do bardzo dobra tabela porównawcza SVG, ale nie została zaktualizowana od 2011 roku, więc nie jest już przydatna.
Warto zauważyć, że ta tabela była ostatnio aktualizowana w 2011 roku – bashaus
Już nie prawda @bashaus. Ta tabela jest regularnie aktualizowana. –
Jeśli pracuję z <img> elementów (w przeciwieństwie do obrazów tła CSS), używam poręczne obejście, kombinacja Modernizr (biblioteka JavaScript, która wykrywa dostępność niektórych funkcji, takich jak .svg wsparcia, w przeglądarkach) oraz kilku linii jQuery:
$(".no-svg img").each(function() {
var $this = $(this);
if ($this.attr("src").indexOf(".svg") > -1) {
var isSvg = $this.attr("src").toString();
var isPng = isSvg.replace(".svg", ".png");
$this.attr("src", isPng);
}
});
1) Tworzę .png wersje każdego pliku .svg. 2) Modernizr nadaje elementowi html klasę .no-svg, jeśli wykryje, że nie ma wsparcia .svg. 3) jQuery zamienia rozszerzenia plików. .indexOf(".svg") sprawdza, czy ciąg ".svg" jest zawarty w wartości src, zwracając -1, jeśli go nie znajduje, i dodatnią liczbą całkowitą, jeśli tak się stanie. Jeśli stwierdzi ".svg", cała src ciąg jest wjechał isSvg i .replace() swapy .svg dla .png i zapisuje wynik jako isPng, który następnie jest ustawiony jako wartość src.
Przyjemnie, ale czy istnieje powód, dla którego nie szuka tylko ".svg" na końcu identyfikatora URI 'src'? – iconoclast
to nie tylko: pieczenie mojego makaronu z tymi dwoma słowami! – landed
... czy można pozwolić serwer apache radzenia sobie z nim:
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} MSIE\s[5-8]\.
RewriteCond %{REQUEST_FILENAME} ^.+?\.svg$
RewriteRule ^(.+?)\.(?:svg)$ $1\.png [L]
trzeba tylko stworzyć .png wersje każdego pliku .svg i to nie ma znaczenia, czy plik jest do css tle lub dla tagu img.
¡Z elementem obiektu!
<object data="example.svg" type="image/svg+xml">
<!-- If browser don't soport/don't find SVG -->
<img src="example.png" alt="Logotype" />
</object>
Można użyć caniuse.js skrypt do wykrycia, jeśli przeglądarek obsługuje SVG czy nie:
caniuse.svg()
https://www.w3schools.com/html/html5_svg.asp –