SVG tvůrce

stručný průvodce SVG grafikou

Element circle

Díky elementu circle je možno vytvořit přesný kruh zadaného poloměru. U tohoto elementu se očekává dosazení hodnot do atributů cx a cy, což jsou souřadnice středu kruhu (písmeno c před x nebo y znamená "center" tedy střed), a do atributu r, který určuje poloměr kruhu. Barvu a tlouštku okraje kruhu stanovíme užitím atributů stroke a stroke-width podobně jako v případě elementu line. Rovnež lze vytvořit kruhu přerušovaný okraj zadáním atributu stroke-dasharray. Prostor uvnitř kruhu je možné vyplnit zadanou barvou díky atributu fill.

Následující kód vygeneruje kruh o poloměru 50px jehož střed bude vzdálen 100px od levého i horního okraje obrazu a bude vyplněn modrou barvou.

<circle cx="100px" cy="100px" r="50px" fill="blue" stroke="black" />
gif_obraz
Element Circle - nejpoužívanější atributy
atributpopis
cxsouřadnice středu kruhu na ose x
cysouřadnice středu kruhu na ose y
rpoloměr kruhu
fillbarva výplně kruhu
strokebarva okraje kruhu
stroke-widthtloušťka okraje kruhu
stroke-dasharraydefinice přerušování okraje kruhu

Element ellipse

Pro vytvoření elipsy existuje v SVG element elipse. Stejně jako v případě kruhu stanovíme její polohu v obraze zadáním atributů cx a cy, určujích polohu středu elipsy. Výstřednost tedy míra "elipsovitosti" je dána poměrem hodnot atributů rx a ry. První z nich tedy rx stanoví poloměr na ose x v elipse, atribut ry pak poloměr na ose y v elipse. Těmito atributy je tedy dána jak výstřednost tak i rozměry elipsy. Je zřejmé, že pokud by měly oba atributy stejnou hodnotu, byl by jejich vzájemný poměr 1:1 a v tom případě bychom vlastně definovali přesný kruh.

Níže uvedený kód vykreslí elipsu:

<ellipse cx="130px" cy="100px" rx="110px" ry="50px" fill="red" stroke="black" />
gif_obraz
Element Ellipse - nejpoužívanější atributy
atributpopis
cxsouřadnice středu elipsy na ose x
cysouřadnice středu elipsy na ose y
rxpoloměr elipsy v ose x
rypoloměr elipsy v ose y
fillbarva výplně elipsy
strokebarva okraje elipsy
stroke-widthtloušťka okraje elipsy
stroke-dasharraydefinice přerušování okraje elipsy

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