Scalable Vector Graphics (SVG) pievienošana neatbalstītajam pārlūkam
Agrāk šajā sērijā esam minējuši mazliet par SVG sabrukumu ar vecajām pārlūkprogrammām un izmantojot Raphael.js, lai kalpotu grafiskam kā alternatīvam risinājumam. Šajā amatā mēs apskatīsim šo jautājumu tālāk.
Ideja ir vienkārša, mēs joprojām izmantosim SVG elementus kā galveno veidu, kā nodrošināt grafiku mūsu mājas lapā, bet tajā pašā laikā mēs nodrošināsim arī rezerves funkciju tā, lai to joprojām varētu sniegt neatbalstītajās pārlūkprogrammās.
Protams, ir daudz ceļu, ko mēs varam veikt, bet mēs aplūkosim tikai divus risinājumus, kas, manuprāt, ir labāks vispārējs risinājums. Tātad, pieņemsim, kā mēs to varam darīt.
Objekta elementa izmantošana
Neatkarīgi no to ievietošanas tieši HTML dokumentā ir vairāki veidi, kā ievietot SVG. Piemēram, ja saglabājam grafiku .svg failu, mēs varam izmantot elementu.
Demonstrācijas nolūkā mūsu mājas lapā esam pievienojuši Apple logo ar SVG. Tomēr neatbalstītās pārlūkprogrammas paliks tukšas. Lai atrisinātu šo problēmu, mēs varam apkalpot Bitmap grafiku, kā norādīts tālāk;
Tādā veidā atbalstītās pārlūkprogrammas joprojām izmantos .svg, kamēr neatbalstītajām pārlūkprogrammām būs Bitmap grafiks. Mēs esam pievienojuši “png” atzīmējiet zem Apple logotipa, lai izsekotu, kurš grafiks tiek piegādāts.
Tomēr, kā mēs minējām citā amatā, Bitmap grafika nav tik elastīga un pielāgojama kā SVG. Tātad, pieņemsim apskatīt citu risinājumu.
Izmantojot Modernizr
Vēl viena metode, ko mēs varam izmantot, ir izmantot Modernizr. Tiem no jums, kas nav iepazinušies ar šo JavaScript bibliotēku, neuztraucieties, ka mums būs īpaša ziņa par to. Pašlaik vienkārši sekojiet mums.
Pirmkārt, sagatavosim dažas nepieciešamās JavaScript bibliotēkas, Modernizr.js un Raphael.js. Tad mums ir jāpārvērš arī mūsu .svg failu ar Raphael atbalstītu formātu ar šo rīku ReadySetRaphael.js un saglabājiet izvadi atsevišķā .js fails; nosauksim to svg.js.
Iekļaut Modernzr.js HTML dokumentā, piemēram:
Un pārējiem diviem failiem, raphael.js un svg.js, mēs to ielādēsim nosacīti, tikai tad, ja tas tiek skatīts neatbalstītajās pārlūkprogrammās.
Ar Modernizr varam noteikt pārlūkprogrammas iespējas, šajā gadījumā mēs atklāsim, vai pārlūkprogramma spēj padarīt SVG, un, ja tas nav, mēs apkalposim skriptu:
ja (! Modernizr.inlinesvg) document.write (''
