Skaalattavan vektorigrafiikan (SVG) lisääminen tukemattomaan selaimeen
Aikaisemmassa postissa tässä sarjassa mainitsimme hieman SVG: n vanhoista selaimista ja Raphael.js: n käyttämisestä graafisena palveluna vaihtoehtoisena ratkaisuna. Tässä tehtävässä tarkastelemme tätä asiaa edelleen.
Ajatus on yksinkertainen, käytämme edelleen SVG-elementtejä ensisijaisena tapana toimittaa grafiikkaa verkkosivullamme, mutta samalla annamme myös takaisintoiminnon niin, että se voidaan edelleen tehdä tukemattomilla selaimilla.
Toki on monia polkuja, joita voimme toteuttaa, mutta tarkastelemme vain kahta ratkaisua, jotka ovat mielestäni parempi yleisluonteinen ratkaisu. Joten, katsotaanpa, miten voimme tehdä sen.
Objektielementin käyttäminen
SVG: n upottaminen lukuun ottamatta sitä, että se siirretään suoraan HTML-dokumenttiin. Jos esimerkiksi tallennamme grafiikan .svg tiedosto, voimme käyttää elementti.
Esittelyä varten olemme lisänneet Apple-logon SVG: llä verkkosivullemme. Tuetut selaimet pysyvät kuitenkin tyhjinä. Ongelman ratkaisemiseksi voimme palvella Bitmap-grafiikkaa seuraavasti;
Tällä tavoin tuetut selaimet käyttävät edelleen .svg, sillä aikaa tukemattomat selaimet käyttävät bittikarttakuvaa. Olemme lisänneet “png” Merkitse Apple-logon alle, jotta voit seurata, mitä grafiikkaa toimitetaan.
Kuten olemme maininneet toisessa virassa, Bitmap-grafiikka ei ole yhtä joustava ja skaalautuva kuin SVG. Joten, katsotaanpa toista ratkaisua.
Modernizrin käyttäminen
Toinen menetelmä, jota voimme käyttää, on käyttää Modernizr. Niille teistä, jotka eivät tunne tätä JavaScript-kirjastoa, älä huoli, että meillä on oma viesti, joka kattaa sen. Pidä nyt kiinni kanssamme.
Ensinnäkin valmistellaan joitakin JavaScript-kirjastoja, Modernizr.js ja Raphael.js. Sitten meidän on myös muutettava .svg tiedostoa Raphael-tuettuun muotoon tämän työkalun, ReadySetRaphael.js: n avulla, ja tallenna tuloste erilliseen .js tiedosto; Anna sen nimi svg.js.
Lisää Modernzr.js HTML-dokumenttiin, kuten näin:
Ja kahdelle muulle tiedostolle, Raphael.js ja svg.js, lataamme sen ehdollisesti, vain silloin, kun sitä tarkastellaan tuetuissa selaimissa.
Modernizrin avulla voimme havaita selaimen ominaisuuden, tässä tapauksessa havaitsemme, pystyykö selain pystyttämään SVG: n, ja jos emme, palvelemme komentosarjaa:
jos (! Modernizr.inlinesvg) document.write (''
