Hlavní navigace

SVG I - vektory v špicatých zátvorkách

Martin Švihla 7. 4. 2003

Scalable Vector Graphics (SVG) je grafický formát, ktorý sa pomaly ale isto dostáva do povedomia širokej verejnosti okľukou cez témy populárnych window managerov. S akým zámerom bol tento štandard vymyslený a čo dokáže si povieme v dnešnom článku.

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.

Jednoduchy priklad SVG


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

Našli jste v článku chybu?

19. 11. 2003 14:25

V.Adam (neregistrovaný)

Dobry den,
vsem co se zajimaji o SVG dporucuji tyto dve stranky http://www.evolgrafix.com kde muzete koupit XStudio tools a http://www.svg-cafe.com
to je comunity co se tyce svg programovani.
s pozdravem




24. 4. 2003 18:22

Primitif (neregistrovaný)

Ta mapa me tedy opravdu dostala... konecne vim na co ze je to svg dobre...

P.S. A dokonce je to opensource :)



Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

120na80.cz: Stoná vaše dítě často? Upravte mu jídelníček

Stoná vaše dítě často? Upravte mu jídelníček

Lupa.cz: Kdo pochopí vtip, může jít do ČT vyvíjet weby

Kdo pochopí vtip, může jít do ČT vyvíjet weby

Vitalia.cz: To není kašel! Správná diagnóza zachrání život

To není kašel! Správná diagnóza zachrání život

Podnikatel.cz: EET: Totálně nezvládli metodologii projektu

EET: Totálně nezvládli metodologii projektu

120na80.cz: Horní cesty dýchací. Zkuste fytofarmaka

Horní cesty dýchací. Zkuste fytofarmaka

Podnikatel.cz: Babiše přesvědčila 89letá podnikatelka?!

Babiše přesvědčila 89letá podnikatelka?!

Podnikatel.cz: Zavře krám u #EET Malá pokladna a Teeta?

Zavře krám u #EET Malá pokladna a Teeta?

Podnikatel.cz: Udávání kvůli EET začalo

Udávání kvůli EET začalo

Lupa.cz: Insolvenční řízení kvůli cookies? Vítejte v ČR

Insolvenční řízení kvůli cookies? Vítejte v ČR

Vitalia.cz: 9 největších mýtů o mase

9 největších mýtů o mase

Vitalia.cz: Znáte „černý detox“? Ani to nezkoušejte

Znáte „černý detox“? Ani to nezkoušejte

Vitalia.cz: 4 pravidla pro návštěvu čerta

4 pravidla pro návštěvu čerta

Měšec.cz: Kdy vám stát dá na stěhování 50 000 Kč?

Kdy vám stát dá na stěhování 50 000 Kč?

DigiZone.cz: ČRa DVB-T2 ověřeno: Hisense a Sencor

ČRa DVB-T2 ověřeno: Hisense a Sencor

Měšec.cz: Jak vymáhat výživné zadarmo?

Jak vymáhat výživné zadarmo?

Lupa.cz: Proč firmy málo chrání data? Chovají se logicky

Proč firmy málo chrání data? Chovají se logicky

DigiZone.cz: Flix TV má set-top box s HEVC

Flix TV má set-top box s HEVC

120na80.cz: Pánové, pečujte o svoje přirození a prostatu

Pánové, pečujte o svoje přirození a prostatu

120na80.cz: Jak oddálit Alzheimera?

Jak oddálit Alzheimera?