SVG tvůrce

stručný průvodce SVG grafikou

Element path

Path (cesta) je v SVG grafice velice "silným" elementem. Zatímco elementy line, circle či rectangle vytvářejí jen jednoduché obrazce, element path poskytuje prostor k tomu, aby bylo možné vykreslit složitější struktury kombinující jak přímé tak i zaoblené tvary. Když svěříte tvorbu zdrojového kódu editoru SVG grafiky (např. Inkscape), tak jsou i jednoduché tvary jako kupř. kruhy nebo čáry vygenerovány právě použitím elementu path. Díky tomuto elementu zkrátka vykreslíte nejširší škálu grafických objektů.

Jistě už ale také tušíte, že zadávání hodnot atributů tohoto elementu nebude žádná hračka, a zbývá jen potvrdit, že tomu tak opravdu je. Aby jste využili všech možností elementu path je třeba se seznámit s větším množstvím teorie.

S prezentačním atributy jako jsou např. stroke, stroke-width či fill je to jednoduché. Ty můžeme používat stejným způsobem jako v elementech circle či rectangle. Velice složité je to ale s atributem d typickým pro právě path. Rozeberme si jej proto nyní podrobněji:

Atribut d

Atribut d má mnoho společného s atributem points používaným v elementech polyline nebo polygon, protože jde vlastně rovněž o seznam souřadnic bodů tvořící kostru grafické struktury. Před nebo za číselné hodnoty se ale v atributu d také navíc vkládají písmenné znaky, které určují jak se takovéto body budou chovat. Tyto písmenné znaky pojmenováváme jako příkazy (commands). Obsah atributu d pak může vypadat např. takto:

d="M20,20 L180,220 L190,240"

Příkazů je celkem 10 a rozdělují se do několika skupin. Jejich seznam je v tabulce.

Seznam příkazů
příkazpopis
příkaz "moveto"
M nebo mpoloha počátečního bodu objektu
příkaz "lineto"
L nebo lpoloha následujícího bodu objektu
H nebo hpoloha následujícího bodu na ose x
V nebo vpoloha následujícího bodu na ose y
příkaz "closepath"
Z nebo zuzavření objektu
příkazy pro křivky
C nebo cpoloha výchozího bodu a ovládacích prvků u kubické beziérovy křivky
S nebo szkrácený zápis pro navazujicí kubickou beziérovu křivku
Q nebo qpoloha výchozího bodu a ovládacích prvků u kvadratické beziérovy křivky
T nebo tzkrácený zápis pro navazujicí kvadratickou beziérovu křivku
A nebo aPolohy bodů pro vytvoření křivky tvaru eliptického oblouku

 

Příkazy moveto a lineto

Nejdříve si představme příkazy moveto a lineto a ukažme si, jak je využít k vytvoření jednoduché čáry. Příkaz moveto ustavuje počáteční bod grafického objektu. Vpisuje se před první dvojicí souřadnic přidáním písmene M (velké) nebo m(malé). Souřadnice za tímto příkazem jsou tedy vždy na začátku, za nimi pak následují další souřadnice s jinými příkazy. Příkaz lineto ustavuje polohu následujícího bodu tvořícího grafický objekt a vpisuje se před další (nepočáteční) dvojicí souřadnic přidáním písmene L(velké) nebo l(malé). Příklad zdrojového kódu, který vytvoří jednoduchou čáru vše osvětlí:

<path fill="none" stroke="black" d="M20,20 L180,220" />

Pokud bychom chtěli vykreslovat složitější objekt, přidávali bychom další a další body, přes které bude čára procházet a to připisováním dalších dvojic souřadnic s předřazeným příkazem lineto (L):

<path fill="none" stroke="black" d="M20,20 L180,220 L190,230 L220,250" />

 

Příkazy malými písmeny - uplatnění relativních hodnot

Při pozorném čtení této stránky, jste si již asi všimli, že příkazy lze zadávat i malými písmeny. To se nám může hodit v případě že chceme použít relativní hodnoty. Pokud jste již někdy stylovali html stránky pomocí CSS tak víte, že tam existuje tzv. relativní pozicování. Hodnoty které zadáte nevyjadřují přesnou polohu, ale změnu oproti danému stavu. Totéž platí i při zadávání relativních hodnot u příkazů. Ukažme si to nyní prakticky. Dejme tomu že máme následující kód vykreslující lomenou čáru, kde jsou použity příkazy s velkým písmenem a jsou tedy uplatněny absolutní hodnoty:

<path fill="none" stroke="black" d="M40,40 L140,220 L240,40" />

Kód vykreslující úplně stejně vypadající objekt, ale s použitím relativních hodnot bude vypadat takto:

<path fill="none" stroke="black" d="M40,40 l100,180 l100,-180" />

Všimněte si, že první příkaz v našem případě používá absolutní hodnoty, za dalšími jsou již hodnoty relativní. Za prvním příkazem l jsou čísla 100 a 180. Znamená to, že bod bude položen o 100 px dále na ose x, a o 180 px dále na ose y než počáteční bod. Za druhým příkazem jsou čísla 100 a -180, která sdělují, že oproti předešlému bodu se souřadnice bodu na ose x zvyšuje o 100 px, a na ose y se naopak o 180 px snižuje, přičemž snížení je vyjádřeno záporným číslem.

Když zapisujeme do elementu path souřadnice jednotlivých bodů, často se stává, že se souřadnice oproti předchozímu bodu změní jen na ose x nebo jen na ose y. V tomto případě může být užitečné použít příkazy vertikální lineto nebo horizontální lineto. Chceme-li uplatnit lineto horizontální předřazujeme před souřadnici písmeno H nebo h , u vertikálního lineto písmeno V nebo v.
Příklad použití:

<path fill="none" stroke="black" d="M40,40 L140,220 V50" />

 

Příkaz closepath

Za pomoci příkazu closepath se grafický objekt automaticky uzavírá. Znamená to, že pak jeho okraj není nikde přerušen. Uzavření je vlastně proces, při kterém se koncový bod spojí čárou s počátečním bodem. Z optického hlediska je možné vytvořit uzavřený objekt zadáním souřadnic tak, že se poloha prvního bodu bude shodovat s polohou toho posledního. Druhou možností je právě uzavření příkazem closepath, která uzavření provede sama. Proč tento příkaz používat, je vidět na obrázku níže. Vidíme na něm vedle sebe dva stejné grafické objekty. Ten vlevo je uzavřen tak, že je poloha počátečního a posledního bodu shodná, objekt vpravo je uzavřen příkazem closepath. Podle toho na čem obrázek prohlížíme a jak máme pozorné oko, vidíme, že u levého objektu není uzavření dokonalé. Drobný kaz je patrný. Objekt vpravo je již uzavřen bezchybně. Tento příklad ukazuje, že použití příkazu closepath lze pro uzavírání objektů určitě doporučit.

gif_obraz

Zdrojový kód výše zobrazeného obrázku je takovýto:

<path fill="none" stroke="black" stroke-width="4px" d="M20,120 L20,240 L180,240 L180,120 L100,50 L20,120" /> <path fill="none" stroke="black" stroke-width="4px" d="M200,120 L200,240 L360,240 L360,120 L280,50Z" />

 

Příkazy pro křivky

Popisy použití příkazů pro křivky započneme u příkazu C sloužící k vytváření kubické beziérovy křivky. Nejmarkantnějším rozdílem oproti předešlým popisovaným příkazům, jako je M nebo L, je větší množství souřadnic, které po příkazu následují. U příkazu C je totiž nutné zadat nejen polohu bodů, kterými křivka prochází, ale navíc je také potřeba stanovit umístění tzv. ovládacích bodů, kterými se křivce dává definitivní tvar (zakřivení). Příklad kódu křivky:

<path fill="none" stroke="black" stroke-width="4px" d="M20,100 C20,50 250,50 250,100" />

Nyní je nutné si přesně popsat co jednotlivé hodnoty v atributu d znamenají. Nejdříve je přítomen příkaz M. Ten je nutný vždy, protože stanoví polohu počátečního bodu. Za ní jsou dvě čísla od sebe oddělená čárkou reprezentující polohu na osách x a y. Poté následuje příkaz C, za kterým jsou tři dvojice čísel. První dvojice (20,50) jsou souřadnice ovládacího bodu, příslušejícího k počátečnímu bodu. Poté následuje druhá dvojice (250,50), což jsou souřadnice druhého ovládacího bodu, příslušejícího k druhému bodu. Poslední dvojice (250,100) jsou souřadnice druhého bodu.

Jak vypadá křivka vygenerovaná popisovaným kódem vidíte níže:

gif_obraz

V předchozím odstavci byly zmíněny tzv. ovládací body. Na obrázku výše ale pochopitelně nejsou vidět, a tak může být poněkud problém představit si, kde jsou. V tom případě pomůže výřez ze screenshotu vykreslující stejnou křivku v editoru Inkscape. Ten totiž tyto ovládací body dokáže zobrazit. Jejich poloha je zvýrazněna drobnými kroužky:

krivka

Příkazy C mohou následovat za sebou, v praxi ale bývá jednodušší použít příkaz S, která vytvoří další kubickou beziérovu křivku, jenž bezprostředně hladce navazuje na tu předchozí. První ovládací bod navazující křivky se zrcadlí,proto stačí již za příkazem S doplnit jen souřadnice druhého ovládacího bodu a koncového bodu křivky.

Příklad kódu:

<path fill="none" stroke="black" stroke-width="2px" d="M40,40 C40,20 60,20 80,40 S120,50 120,40" />

 

Příkaz Q slouží k vykreslení kvadratické bezierovy křivky. Zde je situace o něco jednodušší, protože kvadratická křivka má jen jeden ovládací bod. Za příkazem Q tedy následují souřadnice polohy (jediného) ovládacího bodu a koncového bodu křivky. Zde je příklad kódu:

<path fill="none" stroke="black" stroke-width="2px" d="M20,100 Q60,120 100,100" />

Podobně jako u příkazu C je i u kvadratické bezierovy křivky možný zjednodušený zápis pro další hladce navazující kvadratickou křivku. Slouží k tomu příkaz T. Ovládací bod se opět zrcadlí a jelikož je pouze jeden, stačí za příkaz T dopsat již jen polohu koncového bodu křivky.

Ukázka kódu:

<path fill="none" stroke="black" stroke-width="2px" d="M20,100 Q60,120 100,100 T180,100" />

 

Posledním příkazem který si popíšeme je příkaz A sloužící k vytvoření křivky ve tvaru eliptického oblouku. Za tento příkaz se zapisují parametry:

Příklad kódu:

<path fill="none" stroke="black" stroke-width="2px" d="M20,200 L30,200 A20,20 0 1 1 80,200 L90,200" />

Obrázky na stránce jsou ukázkami zobrazení v podobě bitmapy (formát GIF). Pokud chcete zobrazit svg grafiku přímo, klikněte na tlačítko pod textem. Všechny obrázky pak budou nahrazeny elementy object, které zobrazí přímo svg soubory. Nutný je nainstalovaný ADOBE SVG VIEWER.

Nahraď obrázky GIF za SVG

 

xhtml_valid_icon css_valid_icon
texty, webdesign, programování: Jakub Kosek