Toevoegen van Scalable Vector Graphics (SVG) in niet-ondersteunde browser
In een eerdere post in deze serie hebben we een beetje over de valkuil van SVG met oude browsers gesproken en Raphael.js gebruikt om de afbeelding als een alternatieve oplossing te dienen. In deze post zullen we verder kijken naar deze kwestie.
Het idee is eenvoudig, we zullen nog steeds SVG-elementen gebruiken als de belangrijkste manier om afbeeldingen op onze webpagina weer te geven, maar tegelijkertijd zullen we ook een fallback-functie bieden zodat het nog steeds kan worden weergegeven in niet-ondersteunde browsers.
Natuurlijk zijn er veel paden die we kunnen nemen, maar we zullen alleen naar twee oplossingen kijken die volgens mij een betere generieke oplossing zijn. Laten we dus kijken hoe we het kunnen doen.
Objectelement gebruiken
Naast het rechtstreeks in een HTML-document plaatsen, zijn er verschillende manieren om SVG in te bedden. Bijvoorbeeld als we de afbeelding opslaan .svg bestand kunnen we de element.
Voor het doel van de demonstratie hebben we een Apple-logo met SVG toegevoegd aan onze webpagina. De niet-ondersteunde browsers blijven echter leeg. Om het probleem op te lossen, kunnen we als volgt een Bitmap-afbeelding serveren;
Op deze manier zullen ondersteunde browsers nog steeds de .svg, terwijl de niet-ondersteunde browsers dragen de bitmap-afbeelding. We hebben de “png” markeer onder het Apple-logo om bij te houden welke afbeelding wordt afgeleverd.
Zoals we echter in de andere post hebben vermeld, Bitmapafbeeldingen zijn niet zo flexibel en schaalbaar als SVG. Laten we dus eens naar een andere oplossing kijken.
Modernizr gebruiken
Een andere methode die we kunnen gebruiken is door te gebruiken Modernizr. Voor degenen onder jullie die niet bekend zijn met deze JavaScript-bibliotheek, geen zorgen, we zullen een speciale post hebben om erover te vertellen. Voorlopig hou je gewoon bij.
Laten we eerst een aantal vereiste JavaScript-bibliotheken voorbereiden, Modernizr.js en Raphael.js. Vervolgens moeten we ook onze .svg bestand in een Raphael-ondersteund formaat met deze tool, ReadySetRaphael.js, en sla de output op in een aparte .js het dossier; laten we het een naam geven svg.js.
Voeg Modernzr.js toe aan het HTML-document, zoals het volgende:
En voor de andere twee bestanden, Raphael.js en svg.js, we zullen het voorwaardelijk laden, alleen wanneer het wordt bekeken in niet-ondersteunde browsers.
Met Modernizr kunnen we de browsermogelijkheid detecteren, in dit geval zullen we detecteren of de browser SVG kan weergeven en als dit niet het geval is, zullen we het script serveren:
if (! Modernizr.inlinesvg) document.write (''
