Skaalautuva vektorgraafika (SVG) lisamine toetamata brauserisse
Varasemas postituses selles rühmas mainisime natuke SVG vanade brauseritega seotud raskustest ja kasutades Raphael.js-i graafikale alternatiivse lahendusena. Selles postituses vaatleme seda küsimust edasi.
Idee on lihtne, kasutame endiselt SVG elemente peamise viisina graafika edastamiseks meie veebilehel, kuid samal ajal pakume ka varufunktsiooni nii, et seda saaks veel toetada toetamata brauserites.
Muidugi on olemas palju teid, kuid me vaatame ainult kahte lahendust, mis minu arvates on parem üldine lahendus. Niisiis, vaatame, kuidas me seda teha saame.
Objekti elemendi kasutamine
Peale selle, et panete selle otse HTML-dokumenti, on SVG-d mitmel viisil sisse lülitatud. Näiteks, kui salvestame graafika sisse .svg faili, saame seda kasutada element.
Tutvustamiseks oleme lisanud oma veebilehele Apple'i logo koos SVG-ga. Kuid toetamata brauserid jäävad tühjaks. Probleemi lahendamiseks saame teenida Bitmap graafikut järgmiselt;
Sel viisil võtavad toetatud brauserid endiselt vastu .svg, samal ajal toetamata brauserid kannavad Bitmap graafikut. Oleme lisanud “png” märkige Apple'i logo all, et jälgida, millist graafikat tarnitakse.
Kuid nagu me teisel ametikohal mainisime, Bitmap graafika ei ole nii paindlik ja skaleeritav kui SVG. Niisiis, vaatame teist lahendust.
Modernizri kasutamine
Teine meetod, mida saame kasutada, on kasutada Modernizr. Neile, kes ei tunne seda JavaScripti raamatukogu, ärge muretsege, et meil on selleks mõeldud postitus. Praegu pea meiega lihtsalt kursis olema.
Kõigepealt valmistame ette mõned nõutavad JavaScript-raamatukogud, Modernizr.js ja Raphael.js. Siis peame ka meie .svg selle tööriistaga ReadySetRaphael.js Raphaeli toetatud vormingusse ja salvestage väljund eraldi .js fail; nimetagem seda svg.js.
Lisage Modernzr.js HTML-dokumenti, näiteks:
Ja ülejäänud kahe faili puhul, raphael.js ja svg.js, me laadime selle tingimuslikult, ainult siis, kui seda vaadatakse toetamata brauserites.
Modernizriga saame tuvastada brauseri võime, sel juhul tuvastame, kas brauser on võimeline SVG-d esitama, ja kui see ei ole, siis teenime skripti:
kui (! Modernizr.inlinesvg) document.write (''
