Scalable Vector Graphics (SVG) hozzáadása a nem támogatott böngészőhöz
Ebben a sorozatban egy korábbi bejegyzésben egy kicsit megemlítettük az SVG régi böngészőkkel való csapdájáról, és a Raphael.js használatával alternatív megoldásként szolgálhat a grafika. Ebben a hozzászólásban tovább vizsgáljuk ezt az ügyet.
Az ötlet egyszerű, továbbra is SVG elemeket fogunk használni, mint a grafikus megjelenítés elsődleges módját weblapunkon, de ezzel egyidejűleg visszaállítási funkciót is biztosítunk. így még támogatott böngészőkben is megjeleníthető.
Persze, sok utat tehetünk, de csak két olyan megoldást fogunk megvizsgálni, amely szerintem jobb általános megoldás. Szóval, nézzük meg, hogyan tehetjük meg.
Objektumelem használata
Közvetlenül egy HTML dokumentumba való behelyezés mellett számos módja van az SVG beágyazására. Például, ha a grafikát a .svg fájlt használhatunk elem.
A bemutató célból az Apple logót SVG-vel egészítettük ki weboldalunkra. Azonban a nem támogatott böngészők üresek maradnak. A probléma megoldásához Bitmap grafikát tudunk kiszolgálni, az alábbiak szerint;
Ily módon a támogatott böngészők továbbra is meg fogják venni .svg, míg a nem támogatott böngészők a Bitmap grafikát hordozzák. Hozzáadtuk a “png” jelölje meg az Apple logóját, hogy nyomon követhesse, melyik grafikát szállítja.
Azonban, amint azt a másik bejegyzésben említettük, A bittérképes grafika nem olyan rugalmas és skálázható, mint az SVG. Szóval nézzük meg egy másik megoldást.
A Modernizr használata
Egy másik módszer, amit használhatunk Modernizr. Azok számára, akik nem ismerik ezt a JavaScript-könyvtárat, ne aggódjunk, hogy lesz egy dedikált hozzászólásunk, amely lefedi. Most már csak lépjen velünk.
Először készítsünk néhány szükséges JavaScript könyvtárat, Modernizr.js és Raphael.js. Ezután át kell alakítanunk .svg fájl készítéséhez Raphael által támogatott formátumban, a ReadySetRaphael.js segítségével, és mentse el a kimenetet külön .js fájlba; nevezzük svg.js.
Tartalmazza a Modernzr.js-t a HTML-dokumentumba, mint például:
És a másik két fájlhoz, Raphael.js és svg.js, feltételesen feltöltjük, csak akkor, ha nem támogatott böngészőkben tekintjük meg.
A Modernizr segítségével észlelhetjük a böngésző képességét, ebben az esetben felismertük, hogy a böngésző képes-e SVG-t készíteni, és ha nem, akkor a szkriptet fogjuk kiszolgálni:
ha (! Modernizr.inlinesvg) document.write (''
