Legge til skalerbar vektorgrafik (SVG) i ikke-støttet nettleser
I et tidligere innlegg i denne serien har vi nevnt litt om SVGs fallgruv med gamle nettlesere og ved hjelp av Raphael.js for å betjene grafikken som en alternativ løsning. I dette innlegget vil vi se nærmere på denne saken.
Ideen er enkel, vi vil fortsatt bruke SVG-elementer som den primære måten å levere grafikk på vår nettside, men samtidig vil vi også gi en tilbakekallingsfunksjon slik at den fortsatt kan gjengis i ikke-støttede nettlesere.
Visst, det er mange stier vi kan ta, men vi vil bare se på to løsninger som jeg synes er en bedre generisk løsning. Så, la oss se hvordan vi kan gjøre det.
Bruke Objektelement
Bortsett fra å sette det direkte inn i et HTML-dokument, finnes det flere måter å legge inn SVG. For eksempel, hvis vi lagrer grafikken i .svg fil, kan vi bruke element.
For demonstrasjonsformålet har vi lagt til en Apple-logo med SVG på vår nettside. De støttede nettleserne forblir imidlertid tomme. For å løse problemet kan vi betjene en Bitmap-grafikk som følger;
På denne måten vil støttede nettlesere fortsatt ta .svg, samtidig som De støttede nettleserne vil bære Bitmap-grafikken. Vi har lagt til “png” Merk under Apple-logoen for å spore hvilken grafikk som leveres.
Men som vi har nevnt i det andre innlegget, Bitmapgrafikk er ikke så fleksibel og skalerbar som SVG. Så, la oss ta en titt på en annen løsning.
Bruke Modernizr
En annen metode vi kan bruke er å bruke Modernizr. For de av dere som ikke er kjent med dette JavaScript-biblioteket, ikke bekymre deg, vi vil ha et dedikert innlegg som dekker om det. For nå, hold deg oppdatert med oss.
Først av alt, la oss forberede noen nødvendige JavaScript-biblioteker, Modernizr.js og Raphael.js. Da må vi også konvertere vår .svg filen til et Raphael-støttet format med dette verktøyet, ReadySetRaphael.js, og lagre produksjonen i en separat .js fil; la oss nevne det svg.js.
Inkluder Modernzr.js i HTML-dokumentet, slik som:
Og for de andre to filene, Raphaël.js og svg.js, vi vil laste det betinget, bare når den vises i ikke støttede nettlesere.
Med Modernizr kan vi oppdage nettleseregenskapen, i dette tilfellet vil vi oppdage om nettleseren er i stand til å gjengi SVG, og hvis ikke, vil vi tjene skriptet:
hvis (! Modernizr.inlinesvg) document.write (''
