Přidání škálovatelné vektorové grafiky (SVG) do nepodporovaného prohlížeče
V dřívějším příspěvku v této sérii jsme se zmínili o troskách SVG se starými prohlížeči a pomocí Raphael.js sloužili grafice jako alternativní řešení. V tomto příspěvku se na tuto záležitost podíváme dále.
Myšlenka je jednoduchá, stále používáme SVG elementy jako primární způsob, jak doručit grafiku na naši webovou stránku, ale zároveň poskytneme záložní funkci tak, aby mohl být stále zobrazován v nepodporovaných prohlížečích.
Jistě, existuje mnoho cest, které můžeme přijmout, ale podíváme se pouze na dvě řešení, která považuji za lepší generické řešení. Podívejme se, jak to dokážeme.
Použití prvku objektu
Kromě uvedení přímo do dokumentu HTML existuje několik způsobů, jak vložit SVG. Například, pokud uložíme grafiku do .svg souboru, můžeme použít živel.
Pro demonstrační účely jsme přidali logo Apple s SVG na naše webové stránky. Nepodporované prohlížeče však zůstanou prázdné. Pro vyřešení problému můžeme použít bitmapovou grafiku následujícím způsobem;
Tímto způsobem budou podporované prohlížeče stále brát .svg, zatímco nepodporované prohlížeče budou mít grafiku Bitmap. Přidali jsme “png” pod logem Apple můžete sledovat, která grafika je dodávána.
Jak jsme však zmínili v jiném stanovisku, Bitmapové grafiky nejsou tak flexibilní a škálovatelné jako SVG. Podívejme se tedy na jiné řešení.
Použití Modernizr
Další metodou, kterou můžeme použít, je použití Modernizr. Pro ty z vás, kteří nejsou obeznámeni s touto knihovnou JavaScript, nebojte se, budeme mít vyhrazený příspěvek na to, aby se o tom. Prozatím s námi držte krok.
Nejdříve si připravme několik požadovaných knihoven JavaScriptu, Modernizr.js a Raphael.js. Musíme také převést naše .svg pomocí tohoto nástroje ReadySetRaphael.js do formátu podporovaného Raphaelem a výstup uložte do samostatného \ t .js soubor; pojmenujme to svg.js.
Zahrnout Modernzr.js do dokumentu HTML, jako například:
A pro další dva soubory, raphael.js a svg.js, načteme jej podmíněně, pouze při prohlížení v nepodporovaných prohlížečích.
S programem Modernizr můžeme zjistit schopnost prohlížeče, v tomto případě zjistíme, zda je prohlížeč schopen vykreslovat SVG, a pokud tomu tak není, budeme skript používat:
if (! Modernizr.inlinesvg) document.write (''
