Lägga till skalbar vektorgrafik (SVG) i icke-stödd webbläsare
I ett tidigare inlägg i denna serie har vi nämnt lite om SVGs fallgrop med gamla webbläsare och använder Raphael.js för att betjäna grafiken som en alternativ lösning. I det här inlägget kommer vi att titta vidare på denna fråga.
Tanken är enkel, vi kommer fortfarande använda SVG-element som det primära sättet att leverera grafik på vår hemsida, men samtidigt ger vi också en återgångsfunktion så att den fortfarande kan visas i icke-stödda webbläsare.
Visst, det finns många vägar vi kan ta, men vi kommer bara att titta på två lösningar som jag tycker är en bättre generisk lösning. Så, låt oss se hur vi kan göra det.
Använda objektelement
Förutom att lägga det direkt i ett HTML-dokument, finns det flera sätt att bädda in SVG. Till exempel, om vi lagrar grafiken i .svg fil, vi kan använda element.
För demonstrationsändamålet har vi lagt till en Apple-logotyp med SVG på vår hemsida. De icke-stödda webbläsarna förbli emellertid tomma. För att lösa problemet kan vi servera en Bitmap-grafik enligt följande:
På så sätt tar stödda webbläsare fortfarande .svg, medan De icke-stödda webbläsarna kommer att bära Bitmap-grafiken. Vi har lagt till “png” Markera under Apple-logotypen för att spåra vilken grafik som levereras.
Men som vi har nämnt i den andra posten, Bitmapgrafik är inte lika flexibel och skalbar som SVG. Så, låt oss ta en titt på en annan lösning.
Använda Modernizr
En annan metod vi kan använda är att använda Modernizr. För er som inte är bekanta med det här JavaScript-biblioteket, oroa dig inte, vi kommer att ha en särskild post som täcker om det. För nu, fortsätt bara med oss.
Låt oss först och främst förbereda några obligatoriska JavaScript-bibliotek, Modernizr.js och Raphael.js. Då behöver vi också konvertera vår .svg filen till ett format som stöds av Raphael med detta verktyg, ReadySetRaphael.js, och spara utdata i en separat .js fil; låt oss namnge det svg.js.
Inkludera Modernzr.js i HTML-dokumentet, som så:
Och för de andra två filerna, Raphael.js och svg.js, vi laddar det på villkorligt sätt, bara när den ses i icke-stödda webbläsare.
Med Modernizr kan vi upptäcka webbläsarens kapacitet, i det här fallet kommer vi att upptäcka om webbläsaren kan göra SVG, och om det inte är så kommer vi att tjäna skriptet:
om (! Modernizr.inlinesvg) document.write (''
