Dodavanje skalabilne vektorske grafike (SVG) u nepodržani preglednik
U ranijem postu u ovoj seriji, spomenuli smo malo o SVG-ovoj zamci sa starim preglednicima i korištenjem Raphael.js da služi grafiku kao alternativno rješenje. U ovom postu dalje ćemo razmotriti ovo pitanje.
Ideja je jednostavna, i dalje ćemo upotrebljavati SVG elemente kao primarni način isporuke grafike na našoj web-stranici, ali u isto vrijeme pružit ćemo i povratnu funkciju tako da se može i dalje prikazivati u nepodržanim preglednicima.
Naravno, postoji mnogo putova koje možemo poduzeti, ali samo ćemo pogledati na dva rješenja koja mislim da je bolje generičko rješenje. Dakle, da vidimo kako to možemo učiniti.
Korištenje elementa objekta
Osim postavljanja izravno u HTML dokument, postoji nekoliko načina za ugradnju SVG-a. Na primjer, ako pohranimo grafiku u .svg datoteku, možemo koristiti element.
U svrhu demonstracije, dodali smo Appleov logotip sa SVG-om na našu web-stranicu. Međutim, nepodržani preglednici ostat će prazni. Da bismo riješili problem, možemo poslužiti Bitmap grafiku, kako slijedi;
Na taj način će podržani preglednici i dalje preuzeti .svg, dok nepodržani preglednici nose Bitmap grafiku. Dodali smo “png” označite ispod Appleovog logotipa da biste pratili koji se grafički materijal isporučuje.
Međutim, kao što smo spomenuli na drugom mjestu, Bitmap grafika nije toliko fleksibilna i skalabilna kao SVG. Dakle, pogledajmo drugo rješenje.
Korištenje Modernizr
Druga metoda koju možemo koristiti je pomoću Modernizr. Za one od vas koji nisu upoznati s ovom JavaScript bibliotekom, ne brinite da ćemo imati posvećenu poruku koja će se o tome pokriti. Za sada, samo nas pratite.
Prije svega, pripremimo neke potrebne JavaScript knjižnice, Modernizr.js i Raphael.js. Zatim, također trebamo pretvoriti naše .svg pomoću ovog alata, ReadySetRaphael.js, u datoteku koju podržava Raphael i spremite izlaz u zasebnom .js datoteka; recimo to svg.js.
Uključite Modernzr.js u HTML dokument, na primjer:
I za druge dvije datoteke, Raphaël.js i svg.js, učitat ćemo ga uvjetno, samo kada se pregledava u nepodržanim preglednicima.
S Modernizrom možemo otkriti mogućnosti preglednika, u ovom slučaju otkrit ćemo je li preglednik sposoban prikazati SVG, a ako nije, poslužit ćemo skriptu:
ako (! Modernizr.inlinesvg) document.write (''
