Dodawanie skalowalnej grafiki wektorowej (SVG) w nieobsługiwanej przeglądarce
We wcześniejszym poście w tej serii wspomnieliśmy trochę o pułapce SVG ze starymi przeglądarkami i używaliśmy Raphael.js do obsługi grafiki jako alternatywnego rozwiązania. W tym poście przyjrzymy się tej sprawie dalej.
Pomysł jest prosty, nadal będziemy używać elementów SVG jako podstawowego sposobu dostarczania grafiki na naszej stronie internetowej, ale jednocześnie zapewnimy funkcję awaryjną tak, że może być nadal renderowany w nieobsługiwanych przeglądarkach.
Oczywiście, istnieje wiele ścieżek, które możemy obrać, ale przyjrzymy się tylko dwóm rozwiązaniom, które moim zdaniem są lepszym rozwiązaniem ogólnym. Zobaczmy więc, jak możemy to zrobić.
Używanie elementu obiektu
Oprócz umieszczenia go bezpośrednio w dokumencie HTML, istnieje kilka sposobów osadzenia SVG. Na przykład, jeśli przechowamy grafikę w .svg plik możemy użyć element.
Do celów demonstracyjnych dodaliśmy logo Apple z SVG na naszej stronie internetowej. Jednak nieobsługiwane przeglądarki pozostaną puste. Aby rozwiązać ten problem, możemy obsługiwać grafikę bitmapową w następujący sposób;
W ten sposób obsługiwane przeglądarki będą nadal korzystać z przeglądarki .svg, podczas nieobsługiwane przeglądarki będą miały grafikę Bitmap. Dodaliśmy “png” zaznacz poniżej logo Apple, aby śledzić, która grafika jest dostarczana.
Jednak, jak wspomnieliśmy w innym poście, Grafika bitmapowa nie jest tak elastyczna i skalowalna jak SVG. Spójrzmy więc na inne rozwiązanie.
Korzystanie z Modernizr
Inną metodą, której możemy użyć, jest użycie Modernizr. Dla tych, którzy nie są zaznajomieni z tą biblioteką JavaScript, nie martw się, będziemy mieli dedykowany post na ten temat. Na razie po prostu nadążaj za nami.
Przede wszystkim przygotujmy wymagane biblioteki JavaScript, Modernizr.js i Raphael.js. Następnie musimy także przekonwertować nasze .svg Za pomocą tego narzędzia ReadySetRaphael.js zrób plik w formacie obsługiwanym przez Raphaela i zapisz wynik w osobnym pliku .js plik; nazwijmy to svg.js.
Dołącz plik Modernzr.js do dokumentu HTML, tak:
I dla dwóch pozostałych plików, raphael.js i svg.js, załadujemy go warunkowo, tylko wtedy, gdy jest oglądany w nieobsługiwanych przeglądarkach.
Dzięki Modernizr możemy wykryć możliwości przeglądarki, w tym przypadku wykryjemy, czy przeglądarka jest zdolna do renderowania SVG, a jeśli nie, będziemy obsługiwać skrypt:
if (! Modernizr.inlinesvg) document.write (''
