Добавяне на мащабирана векторна графика (SVG) в неподдържан браузър
В по-ранен пост от тази серия, споменахме малко за подводството на SVG със стари браузъри и използвайки Raphael.js, за да служи на графиката като алтернативно решение. В този пост ще разгледаме този въпрос по-нататък.
Идеята е проста, ние все още ще използваме SVG елементите като основен начин за доставяне на графики на нашата уеб страница, но в същото време ще осигурим и резервна функция. така, че все още да може да се визуализира в неподдържани браузъри.
Разбира се, има много пътища, които можем да предприемем, но ще разгледаме само две решения, които според мен са по-добро общо решение. Така че, нека да видим как можем да го направим.
Използване на елемент на обект
Освен поставянето му директно в HTML документ, има няколко начина за вграждане на SVG. Например, ако съхраняваме графиката в .SVG файл, можем да използваме елемент.
За целите на демонстрацията, добавихме лого на Apple с SVG на нашата уеб страница. Въпреки това неподдържаните браузъри ще останат празни. За да решим проблема, можем да подадем Bitmap графика, както следва;
По този начин поддържаните браузъри ще продължат да приемат .SVG, докато Неподдържаните браузъри ще носят графиката за Bitmap. Добавихме “PNG” маркирайте под логото на Apple, за да проследявате графиката, която се доставя.
Въпреки това, както споменахме в другия пост, Bitmap графиките не са толкова гъвкави и мащабируеми като SVG. Така че нека разгледаме друго решение.
Използване на Modernizr
Друг метод, който можем да използваме, е да използваме Modernizr. За тези от вас, които не са запознати с тази библиотека на JavaScript, не се притеснявайте, че ще имаме специален пост, който да покрива за него. За сега просто ни поддържайте.
Първо, нека подготвим някои задължителни JavaScript библиотеки, Modernizr.js и Raphael.js. След това, ние също трябва да конвертираме нашите .SVG файл, поддържан от Raphael, с този инструмент, ReadySetRaphael.js и запишете изхода в отделен .JS файл; нека го наречем svg.js.
Включете Modernzr.js в HTML документа, като:
А за другите два файла, Raphael.js и svg.js, ще я заредим условно, само когато се преглежда в неподдържани браузъри.
С Modernizr можем да открием възможностите на браузъра, в този случай ще открием дали браузърът е способен да визуализира SVG, и ако не е, ще обслужваме скрипта:
ако (! Modernizr.inlinesvg) document.write (''
