Tilføjelse af skalerbar vektorgrafik (SVG) i ikke understøttet browser
I et tidligere indlæg i denne serie har vi nævnt lidt om SVGs faldgrube med gamle browsere og ved hjælp af Raphael.js at betjene grafikken som en alternativ løsning. I dette indlæg vil vi se nærmere på dette spørgsmål.
Ideen er enkel, vi vil stadig bruge SVG-elementer som den primære måde at levere grafik på vores hjemmeside på, men samtidig giver vi også en tilbagesendingsfunktion så det stadig kan gøres i ikke understøttede browsere.
Sikker på, at der er mange veje vi kan tage, men vi vil kun se på to løsninger, som jeg synes er en bedre generisk løsning. Så lad os se, hvordan vi kan gøre det.
Brug af objektelement
Ud over at sætte det direkte ind i et HTML-dokument, er der flere måder at integrere SVG på. For eksempel, hvis vi gemmer grafikken i .svg fil, vi kan bruge element.
Til demonstrationsformålet har vi tilføjet et Apple-logo med SVG til vores hjemmeside. De understøttede browsere forbliver imidlertid tomme. For at løse problemet kan vi betjene en Bitmap-grafik som følger:
På denne måde vil understøttede browsere stadig tage .svg, mens De understøttede browsere vil bære Bitmap-grafikken. Vi har tilføjet “png” Markér under Apple-logoet for at spore, hvilken grafik der leveres.
Men som vi har nævnt i den anden post, Bitmap-grafik er ikke så fleksibel og skalerbar som SVG. Så lad os tage et kig på en anden løsning.
Brug af Modernizr
En anden metode, vi kan bruge, er at bruge Modernizr. For de af jer, der ikke er bekendt med dette JavaScript-bibliotek, skal du ikke bekymre dig om, at vi vil have et dedikeret indlæg til at dække om det. For nu skal du bare holde op med os.
Først og fremmest, lad os forberede nogle nødvendige JavaScript-biblioteker, Modernizr.js og Raphael.js. Så skal vi også konvertere vores .svg fil i et Raphael-understøttet format med dette værktøj, ReadySetRaphael.js, og gem output i en separat .js fil; lad os kalde det svg.js.
Medtag Modernzr.js i HTML-dokumentet, som sådan:
Og for de to andre filer, Raphael.js og svg.js, vi vil indlæse det betinget, kun når den ses i ikke understøttede browsere.
Med Modernizr kan vi opdage browserfunktionen, i dette tilfælde vil vi opdage, om browseren er i stand til at gengive SVG, og hvis det ikke er vi, vil vi tjene scriptet:
hvis (! Modernizr.inlinesvg) document.write (''
