SVG je jazyk založený na XML, ktorý popisuje dvojrozmernú grafiku. Štandard pochádza z dielne W3C. Začalo sa na ňom pracovať v roku 1998 a v súčastnosti je vo verzii 1.1.
SVG znamená „Scalable Vector Graphics“, no s prekladom týchto troch slov to nie je také jednoduché, ako by sa mohlo zdať. Začnime od konca.
Graphics
Na rozdiel od ostatných XML jazykov, ktoré nesú väčšinou textovú informáciu, SVG skutočne popisuje grafiku. XML elementy zodpovedajú grafickým objektom, prípadne operáciám nad nimi. Tento obsah je však jednoducho editovateľný a tak je SVG priam predurčené na dynamické generovanie grafiky.
Vector
SVG popisuje vektorovú grafiku, zloženú z čiar a kriviek, ktorým sú priradené príslušné atribúty. Naviac však SVG môže obsahovať aj bitmapovú grafiku.
Scalable
Toto slovo má v kontexte SVG dva významy. Prvým je zachovanie kvality grafiky pri rôznych veľkostiach zobrazenia. To znamená, že mnohonásobným zväčšením obrázku sa objavia skryté detaily, no jeho kvalita bude stále rovnaká.
„Škálovateľnosť“ v druhom význame je možnosť skladať SVG dokument z iných samostatných SVG dokumentov. Z toho vyplýva znovupoužiteľnosť obrázkových komponentov.
Vlastnosti SVG
Aké možnosti pre tvorbu grafiky teda tento štandard poskytuje?
Grafické elementy
Jazyk ponúka základné tvary ako čiara, obdĺžnik, kružnica a podobne a tiež Bezieriove krivky. Tieto objekty môžu byť združované do skupín, rôznym spôsobom transformované, obtiahnuté a vyplnené farbou, gradientom či vzorom, dá sa nastaviť ich priehľadnosť. Jednoducho, SVG dokáže všetko, čo vektorová grafika umožňuje.
Štýly
SVG umožňuje používanie kaskádových štýlov (CSS). Štýly tak pomáhajú kontrolovať vzhľad grafiky veľmi podobne ako v HTML.
Filtre
V SVG sa dajú aplikovať na grafiku rôzne efekty ako napríklad tieň, svetlá, farebné prechody, rozostrenie (blur) a podobne. Užívateľom definované efekty sú použité až na zobrazovaný obrázok, takže nemenia pôvodnú informáciu, čo je dôležité najmä pri texte.
Písmo
V SVG je text uložený v textovom formáte, ale zobrazovaný je ako ostatné grafické elementy. To znamená, že naň môžu byť použité všetky grafické funkcie, ale zároveň zostáva informácia z textu prístupná napriklad pre vyhľadávače.
Skriptovanie
SVG má ambície byť jazykom interaktívnym. S grafickými elementami a ich vlastnosťami sa dá manipulovať pomocou skriptov (prevažne ECMAScript) prostredníctvom DOM2 a udalostí.
Animácie
Samozrejme, že animácie môžu byť tvorené pomocou spomínaných skriptov, no SVG priamo obsahuje nástroje na animovanie grafiky. Pomocou vlastných elementov SVG dokáže s objektami pohybovať, plynule meniť v čase ich tvar, farbu a podobne.
Modularizácia
Všetky spomínané vlastnosti môžu byť uzavrené do samostatných SVG modulov a používané na iné SVG moduly. Takto sa dajú vytvoriť knižnice filtrov a animácií, ktoré môžu byť voľne kombinované.
Navyše vďaka menným priestorom (namespaces) nie je SVG obmedzené len samé na seba, ale môže byť používané aj s inými XML jazykmi.
W3C pripravuje dokonca doporučenie pre ľubovolné kombinovanie XHTML, SVG a MathML v jednom dokumente, ale to už je slušná divočina. Každopádne koho by to zaujímalo, môže si pozrieť koncept.
Ukážkový príklad
Ako taký SVG dokument vyzerá a ako vyzerá výsledok je ilustrované na nasledujúcom príklade.
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<g style="fill-opacity:0.7; stroke:black; stroke-width:5px;">
<circle cx="190px" cy="120px" r="100px" style="fill:red;" />
<circle cx="120px" cy="260px" r="100px" style="fill:blue;" />
<circle cx="260px" cy="260px" r="100px" style="fill:green;" />
</g>
</svg>
Na prvý pohľad je všetko jasné, na vysvetlenie snáď dodám, že element <g> len združuje elementy v ňom do skupiny (group) a tie z neho dedia jeho vlastnosti. Tento kúsok XML kódu vytvorí v SVG prehliadači takýto obrázok.
Pokiaľ váš webový prehliadač podporuje SVG, skúste sa pozrieť, ako bude tento dokument zobrazený. Malo by to fungovať pre MS Internet Explorer a Operu s Adobe SVG Viewer-om a tiež pre Mozillu so skompilovanou natívnou podporou SVG.
Ak takýto prehliadač nemáte, počkajte si na druhý diel článku, v ktorom si povieme, ako je to vlastne s podporou SVG na webe. Tiež sa pozrieme na SVG editory či konvertory, samozrejme so zameraním na Linux.
Súvisiace odkazy:
W3C stránka o SVG
SVG 1.1 Recommendation
SVG Wiki
SVG na Adobe
ČLÁNKY DO MAILU