Aggiunta di grafica vettoriale scalabile (SVG) nel browser non supportato
In un precedente articolo di questa serie, abbiamo accennato un po 'alla trappola di SVG con i vecchi browser e usando Raphael.js per servire l'immagine come soluzione alternativa. In questo post esamineremo ulteriormente la questione.
L'idea è semplice, continueremo a utilizzare gli elementi SVG come modo principale di fornire elementi grafici sulla nostra pagina Web, ma allo stesso tempo forniremo anche una funzione di fallback in modo che possa essere ancora visualizzato nei browser non supportati.
Certo, ci sono molti percorsi che possiamo intraprendere, ma esamineremo solo due soluzioni che ritengo sia una soluzione generica migliore. Quindi, vediamo come possiamo farlo.
Utilizzando l'elemento oggetto
Oltre a metterlo direttamente in un documento HTML, ci sono diversi modi per incorporare SVG. Ad esempio, se memorizziamo l'immagine .svg file, possiamo usare il elemento.
Per lo scopo dimostrativo, abbiamo aggiunto un logo Apple con SVG alla nostra pagina web. Tuttavia, i browser non supportati rimarranno vuoti. Per risolvere il problema, possiamo fornire un grafico Bitmap, come segue;
In questo modo, i browser supportati continueranno a prendere il .svg, mentre i browser non supportati porteranno la grafica Bitmap. Abbiamo aggiunto il “png” segnare sotto il logo Apple per tracciare quale grafica viene consegnata.
Tuttavia, come abbiamo menzionato nell'altro post, La grafica bitmap non è così flessibile e scalabile come SVG. Quindi, diamo un'occhiata a un'altra soluzione.
Usando Modernizr
Un altro metodo che possiamo usare è usando Modernizr. Per quelli di voi che non hanno familiarità con questa libreria di JavaScript, non preoccupatevi, avremo un post dedicato da trattare. Per ora, continua con noi.
Prima di tutto, prepariamo alcune librerie JavaScript richieste, Modernizr.js e Raphael.js. Quindi, dobbiamo anche convertire i nostri .svg file in un formato supportato da Raphael con questo strumento, ReadySetRaphael.js, e salva l'output in un file separato .js file; chiamiamolo svg.js.
Includi Modernzr.js nel documento HTML, in questo modo:
E per gli altri due file, Raphaël.js e svg.js, lo cariceremo in modo condizionale, solo quando è visualizzato in browser non supportati.
Con Modernizr possiamo rilevare la capacità del browser, in questo caso verificheremo se il browser è in grado di eseguire il rendering di SVG e, in caso contrario, serviremo lo script:
if (! Modernizr.inlinesvg) document.write (''
