Adăugarea grafică vectorială scalabilă (SVG) în browser neacceptat
Într-un post anterior din această serie, am menționat un pic despre capturarea SVG cu browsere vechi și folosind Raphael.js pentru a servi graficul ca soluție alternativă. În acest post vom examina această problemă în continuare.
Ideea este simplă, vom folosi în continuare elementele SVG ca modalitate principală de a furniza grafică pe pagina noastră web, dar, în același timp, vom oferi și o funcție de rezervă astfel încât să poată fi redat încă în browserele nesuportate.
Desigur, există multe căi pe care le putem lua, dar vom analiza doar două soluții care cred că este o soluție mai bună generică. Să vedem cum putem face acest lucru.
Utilizarea elementului obiect
În afară de punerea directă într-un document HTML, există mai multe moduri de a încorpora SVG. De exemplu, dacă stocăm grafica în .svg fișier, putem folosi element.
Pentru scopul demonstrativ, am adăugat pe pagina noastră o siglă Apple cu SVG. Cu toate acestea, browserele neacceptate vor rămâne goale. Pentru a rezolva problema, putem servi un grafic Bitmap, după cum urmează;
În acest fel, browserele acceptate vor lua în continuare .svg, in timp ce browserele nesuportate vor purta graficul Bitmap. Am adăugat “png” marcați sub sigla Apple pentru a urmări ce grafic este livrat.
Cu toate acestea, după cum am menționat în celălalt post, Graficele bitmap nu sunt la fel de flexibile și scalabile ca SVG. Deci, să aruncăm o privire la o altă soluție.
Utilizarea Modernizr
O altă metodă pe care o putem folosi este folosirea Modernizr. Pentru cei care nu sunteți familiarizați cu această bibliotecă JavaScript, nu vă faceți griji că vom avea un post dedicat pentru a le acoperi. Pentru moment, trebuie doar să ții pasul cu noi.
Mai întâi de toate, să pregătim câteva biblioteci JavaScript necesare, Modernizr.js și Raphael.js. Apoi, trebuie de asemenea să ne convertim .svg fișier într-un format compatibil cu Raphael cu acest instrument, ReadySetRaphael.js, și salvați ieșirea într-un fișier separat .js fişier; hai să o spunem svg.js.
Includeți Modernzr.js în documentul HTML, după cum urmează:
Și pentru celelalte două fișiere, Raphaël.js și svg.js, o vom încărca condiționat, numai atunci când este vizionat în browserele nesuportate.
Cu Modernizr putem detecta capacitatea browserului, în acest caz vom detecta dacă browserul este capabil să reda SVG, iar dacă nu este, vom servi scriptul:
dacă (! Modernizr.inlinesvg) document.write (''
