SVG - Scalable Vector Graphics
Sériál článkov pripravený pre časopis PC Revue resp. pre jeho potomka INFOWARE o SVG - škálovateľnej vektorovej grafike. Články sú zostavené tak, že postupujú od jednoduchšieho k zložitejšiemu, ale súčasne tak, aby každý článok mohol byť zruzumiteľný aj samostatne. Od všeobecného úvodu, kde je ukázané, ako je možné SVG overiť, cez kreslenie základných geometrických tvarov, kriviek, transformácie bude čitateľ dovedený aj k náročnejším témam, vyžadujúcich schopnoť tvorby skriptov, poznanie objektového modelu dokumentu či jazyka SMIL.
Poznámky
- Príklady budú zväčša súbory s príponou .svg, ktoré v čase vzniku článkov bol schopný zobraziť webový prehliadač Internet Explorer po nainštalovaní Adobe SVG Viewer. Ten je dostupný na adrese http://www.adobe.com/svg/viewer/install/.
- Na lokálnom počítači fungujú príklady pri zobrazení priamo SVG dokumentu. Zo servera www.buransky.sk sa to nedarí. Preto sú tu príklady dostupné prostredníctvom vloženia SVG dokumentu do XHTM využitím prvku object.
- Pre návrat z príkladu na túto stránku použite ikonu "Dozadu" v paneli nástrojov prehliadača.
- Pri zobrazení príkladu v podobe SVG dokumentu je možné vidieť jeho kód po vyvolaní zodpovedajúcej položky menu resp. kontextového menu - položka Zobraziť kód.
- Kód je možné vidieť aj v xml verzii príkladu. Pre to však bolo potrebné odstrániť definíciu typu SVG dokumentu. Jej ponechanie v príklade spôsobovalo chybu: "Entitu parametru je třeba před použitím definovat. Při zpracování prostředku http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd došlo k chybě. Řádek 55, pozice 2" :-(((
Obsah
INFOWARE 1/2005
SVG: Úvod
Úvodný článok podáva základné informácie o SVG. Je to jazyk pre zápis dvojrozmerných grafických objektov v grafických aplikáciách. Je založený na XML (Extensible Markup Language) a teda výsledná podoba zápisu grafiky je v textových dokumentoch. Na rozdiel od takých grafických formátov, ako je BMP, JPEG, PNG sa nejedná o definovanie bodov obrazu, ale o vektorovú grafiku. Sú v nej definované grafické objekty a geometrické tvary tak, že môžu byť zväčšované a zmenšované bez zmeny kvality zobrazenia.
Článok ukazuje cestu, ako získať všetko potrebné pre overenie princípov jazyka na jednoduchých príkladoch. V čase vzniku článkov bol SVG dokumenty schopný zobraziť webový prehliadač Internet Explorer po nainštalovaní Adobe SVG Viewer, ktorý je dostupný na adrese http://www.adobe.com/svg/viewer/install/.
Okrem vytvorenia a zobrazenia SVG dokumentov - súborov s príponou .svg, je ukázané aj vloženie takého dokumentu do XHTM dokumentu s využitím prvku object.
Príklady
-
01/circle1.svg
Jednoduchý SVG dokument s jedným kruhom. -
01/XhtmlObject1.html
Príklad ukazuje vloženie SVG dokumentu do XHTML s využitím prvku object. -
01/XhtmlObject2.html
To isté, ako v predošlom príklade, ale naviac je použitý prvok embed. -
01/XhtmlNS.html
V odporúčaní SVG ukázaný príklad použitia SVG prvkov s využitím definovania priestoru mien v čase vzniku článku v XHTML dokumente a prehliadači Microsoft IE 6 nefungoval.
INFOWARE 2/2005
SVG: Základné geometrické tvary
Článok ukazuje prvky SVG a ich atribúty, ktoré umožňujú zapísať kód definujúci základné geometrické tvary - pravouholníky, kruhy, elipsy, čiary a mnohouholníky.
Príklady
-
02/rect01.svg,
02/html/rect01.html,
02/xml/rect01.xml
Príklad ukazuje použitie prvku rect pre zobrazenie dvoch pravouholníkov. Prvý má zobrazenú iba obvodovú čiaru a ohraničuje tak priestor, v ktorom budú zobrazované skúmané geometrické tvary. Druhý pravouholník má vyfarbenú aj plochu. -
02/rect01a.svg,
02/html/rect01a.html,
02/xml/rect01a.xml
To isté, ako prvý príklad, ale prvok svg nemá definovaný atribút viewBox. -
02/rect01b.svg,
02/html/rect01b.html,
02/xml/rect01b.xml
To isté, ako prvý príklad, ale prvok svg má iné hodnoty atribútu viewBox. -
02/rect01c.svg,
02/html/rect01c.html,
02/xml/rect01c.xml
To isté, ako prvý príklad, ale ešte iné hodnoty atribútu viewBox. -
02/rect02.svg,
02/html/rect02.html,
02/xml/rect02.xml
Pravouholník so zaoblenými rohmi. -
02/cirel01.svg,
02/html/cirel01.html,
02/xml/cirel01.xml
Kruhy a elipsy. -
02/cirel02.svg,
02/html/cirel02.html,
02/xml/cirel02.xml
To isté ako predošlý príklad, ale prvok g je použitý pre zoskupenie prvkov a definovanie ich spoločcných vlastností. -
02/line01.svg,
02/html/line01.html,
02/xml/line01.xml
Prvok line je určený pre definovanie čiary. -
02/polyline01.svg,
02/html/polyline01.html,
02/xml/polyline01.xml
Prvok polyline umožňuje definovať spojené čiary. -
02/polyline01a.svg,
02/html/polyline01a.html,
02/xml/polyline01a.xml
Prvok polyline má aj atribút fill, ktorým sa definuje farba plochy ohraničenej čiarami. V predošlom príklade má tento atribút hodnotu "none" - má význam nevyfarbovať plochu. V tomto príklade atribút fill nie je uvedený. Jeho default hodnota je čierna farba. Preto je plocha ohraničená čiarami čierna. -
02/polyline01b.svg,
02/html/polyline01b.html,
02/xml/polyline01b.xml
Ešte jeden príklad použitia prvku polyline bez atribútu fill, ale s iným koncovým bodom. -
02/polygon01.svg,
02/html/polygon01.html,
02/xml/polygon01.xml
Prvok polygon je určený pre definovanie mnohouholníka. Má rovnaký zápis, ako polyline, ale vždy zabezpečí prepojenie koncového bodu s počiatočným. -
02/path01.svg,
02/html/path01.html,
02/xml/path01.xml
Prvok path je určený pre zadanie dráhy. Tento príklad dáva taký istý výsledok, ako vyššie uvedený príklad použitia polyline. -
02/path02.svg,
02/html/path02.html,
02/xml/path02.xml
Použitie prvku path pre zápis mnohouholníka - taký istý výsledok, ako bol vyššie dosiahnutý prvkom polygon.
