Na čo je nám SVG?

Viete čo je SVG? Aké je jeho využitie vo webovej grafike? Ak nie, tu je pár základných info o tomto štandarde a jeho použití na webe.

Logo SVG - vložené ako IMG

Mnohí webdizajnéri ešte aj dnes považujú príponu SVG za exotickú. Dôvodom nie zrejme ani tak chýbajúca podpora v starších prehliadačoch, ako skôr neochota prechádzať po rastrovej grafike a Flash-i na niečo nové.
Podľa http://caniuse.com/#search=svg podporuje SVG v základných formách cez 80 percent prehliadačov, IE opäť ako posledný až od verzie 9. S použitím knižníc ako napr. Raphaël.js je možné používať SVG už od IE6.
S príchodom HTML5 parserov, podpory webfontov, ignorovaním Flashu na niektorých mobilných systémoch a požiadavkami responzivity však vektorový formát pre web získava na dôležitosti a SVG prestáva byť nepoužiteľnou hračkou.

SVG je formát pre vektorovú grafiku postavený na XML. To síce znamená, že sa dá upraviť aj v textovom editore, ale pre prejav grafického cítenia to nie je práve najlepšie. Keďže je to formát, ktorý je na svete už nejaký ten rok, je podporovaný väčšinou editorov pre vektorovú grafiku.
Či už je to Adobe Illustrator, alebo zadarmo dostupný Inkscape, svoju grafiku môžete uložiť do SVG bez potreby ďalších nástrojov.

SVG je možné ukladať aj v komprimovanej podobe ako SVGZ a do HTML ho vkladať:

• nepriamo cez značky object, embed, iframe a img,
• priamo ako tzv. "inline SVG" v HTML5 začínajúc značkou <svg,
• do CSS ako grafický zdroj pre štýly - napr. pozadie, ikonky, webfont.

Google používa HTML5+SVG pre svoje Charts.
S použitím knižníc ako Raphaël.js, či D3.js je možné vytvárať nie len fanscinujúce interaktívne grafy, ale celkom nové užívateľské prostredia.
Našiel som využitie pre SVG na svojich lezeckých stránkach v užívateľskom prostredí umožňujúcom lezcom "kresliť lezeckú cestu na fotku skaly" (viď. sprievodca na climbersroutes.com).
Využitie SVG je široké, ako sa napokon snažím predviesť aj prvkami v tomto článku, ktoré sú vo formáte SVG.

Možnosti využitia sú len na fantázií a s časom počet praktických použití mimo experimentov nadšencov rastie. S knižnicami ktoré dnes existujú je SVG tým chýbajúcim vektorovým nástrojom web grafika. Pretože hoci nám vládnu rastre, tak ako v tlačovinách, aj na webe majú vektory svoje opodstatnenie:

• vlastnosťou vektorov je, že bez ohľadu na to, aký veľký chcete mať obrázok, veľkosť súboru je stále rovnaká. Či už chcete pokryť pozadie na grafikovej 30-palcovej pýche, alebo 3 palce na školákovom smartphone, stačí jeden súbor.
• na rozdiel do Flash-u, ako XML jazyk vytvára elemety vrámci DOM a teda priamo manipulovateľné cez JS. To umožňuje nie len animácie (tie podporuje aj samotné SVG cez svoje SMIL) ale hlavne interaktivitu a prepojenie všetkých častí webstránky.

Chcem predstaviť ešte jeden zaujímavý spôsob využitia SVG. Odkedy svet objavil Prezi prezentácie, tie vytvorené office programoch sú už trochu fádne. Spojiť spôsob akým sú v Prezi chápané prezenácie s možnosťou bezplatne tvoriť a na webe publikovať prezentácie. To je výsledok, ktorý ponúka projekt Sozi - viď priloženú prezentáciu v SVG vytvorenú pomocou neho:

V prezentácii sa posúvaš kliknutím alebo šípkami.

Tento článok nemá ambíciu byť podrobným sprievodcom pre grafika s ambíciou ponoriť sa do tajov SVG. Na to slúžia okrem samotného detského objavovania iné, lepšie zdroje (napr. Learn SVG).
Tento článok ma za ambíciu iba poukázať v slovenčine na to, že takýto formát tu existuje, využíva sa a začína sa zaujímavými spôsobmi uplatňovať v praxi, rozširujúc tak možnosti webových prezentácií.

Pokiaľ niečo v článku nefunguje ako má, zrejme máte starý prehliadač. Ak chcete vidieť priamo ukážky použitia SVG v kóde, pozrite si odkazy, alebo kód tohto článku :).