Pridanie škálovateľnej vektorovej grafiky (SVG) do nepodporovaného prehliadača
V skoršom príspevku v tejto sérii sme spomenuli trochu o tom, ako SVG skĺzol starými prehliadačmi a pomocou programu Raphael.js slúžil grafiku ako alternatívne riešenie. V tomto príspevku sa pozrieme na túto záležitosť ďalej.
Myšlienka je jednoduchá, stále budeme používať prvky SVG ako primárny spôsob, ako poskytnúť grafiku na našej webovej stránke, ale súčasne poskytneme záložnú funkciu takže ho môžete stále zobrazovať v nepodporovaných prehliadačoch.
Samozrejme, existuje mnoho ciest, ktoré môžeme prijať, ale budeme sa len zaoberať dvoma riešeniami, o ktorých si myslím, že sú lepším druhovým riešením. Pozrime sa teda, ako to môžeme urobiť.
Použitie prvku objektu
Okrem toho, že ste ho vložili priamo do dokumentu HTML, existuje niekoľko spôsobov, ako vkladať SVG. Ak napríklad uložíme grafiku .svg súbor, môžeme použiť element.
Pre demonštračný účel sme na našu webovú stránku pridali logo spoločnosti Apple so SVG. Nepodporované prehliadače zostanú prázdne. Na vyriešenie problému môžeme zobraziť bitmapovú grafiku takto:
Týmto spôsobom budú podporované prehliadače stále používať .svg, zatiaľ čo nepodporované prehliadače budú mať bitmapovú grafiku. Pridali sme “png” pod logom Apple, aby ste mohli sledovať, ktorá grafika sa dodáva.
Ako sme však spomenuli v druhom príspevku, Bitmapová grafika nie je tak flexibilná a škálovateľná ako SVG. Tak sa pozrime na iné riešenie.
Používanie služby Modernizr
Ďalšou metódou, ktorú môžeme použiť, je použitie Modernizr. Pre tých z vás, ktorí nie sú oboznámení s touto knižnicou JavaScriptu, nebojte sa, budeme mať osobitný príspevok na to, aby sme o tom pokryli. Pre túto chvíľu len držte krok s nami.
Po prvé, pripravte si niektoré požadované knižnice JavaScript, Modernizr.js a Raphael.js. Potom musíme tiež previesť náš .svg súbor do formátu podporovaného programom Raphael pomocou tohto nástroja ReadySetRaphael.js a uložte výstup do samostatného .js súbor; povedzme to svg.js.
Zahrňte do HTML dokumentu dokument Modernzr.js, a to takto:
A pre ostatné dva súbory, Raphael.js a svg.js, podmienečne ju načítame, iba vtedy, ak sa zobrazuje v nepodporovaných prehliadačoch.
S programom Modernizr môžeme zistiť schopnosť prehliadača, v tomto prípade zistíme, či je prehliadač schopný vykresliť SVG a ak to nie je, budeme slúžiť skriptu:
ak (! Modernizr.inlinesvg) document.write (''
