Základy SVG

POZOR! Článek jsem napsal před více jak rokem, a tudíž už nemusí reflektovat můj nynější názor nebo může být zastaralý.

SVG je zkratka z anglického Scalable Vector Graphic, tedy škálovatelná vektorová grafika. SVG je značkovací jazyk založený na XML, pomocí kterého definujete matematicky vyjádřitelné prvky (přímka, kruh, elipsa …).

Díky své otevřenosti se podpora pro vykreslení SVG nachází ve všech nových verzí prohlížečů.

SVG vs Canvas

Obě dvě technologie se chodí pro použití grafiky na webu, každá ovšem na jiný druh. SVG vykresluje prvky ve vektorech, které sice netrpí na „kostičkování“ při přiblížení, ale pokud bude prvků přespříliš, budou se zobrazovat pomalu, nehodí se tedy pro náročné „prohlížečové hry“.

Naproti tomu Canvas vykresluje grafiku pomocí bitmap, tedy bod po bodu, což je při složitých objektech poměrně rychlé.

Canvas navíc funguje jako plátno, na které kreslíte pomocí JavaScriptu (ne pomocí značek XML), takže na prvky nelze navázat interakce jako onMouseOver, nebo onClick.

Struktura SVG dokumentu

SVG můžete vložit rovnou do HTML nebo i do samostatného soubru s koncovkou *.svg. Všechny prvky můžete ovlivnit i z CSS, které můžete navázat přes třídu nebo identifikátor.

Ukázka vložení do HTML:

Samostatný soubor:

Základní prvky

Každý prvke musí být uvnitř plátna <svg>. Prvek můžete pomocí stylů nebo atributů na značce přizpůsobit. CSS styl můžete použít jako atribut, obráceně to nejde.

CSS vlastnost	Význam
stroke	barva obvodu
stroke-width	tloušťka obvodu
stroke-opacity	průhlednost obvodu
fill	barva výplně
fill-opacity	průhlednost výplně

Atribut	Význam
width	šířka
height	výška
x,y	pozice prvku
rx,ry	zaoblení (radius)
cx,cy	pozice středu kruhu
r	průměr kruhu

Obdélník

Obdélník definujete pomocí značky <rect>.

Demo:

Kruh

Demo:

Elipsa

Demo:

Čára

Demo:

Polygon

Polygon se určuje pomocí bodů (points), které se oddělují čárkou.

Demo:

Demo:

Křivka

Demo:

Text

Miluju SVG

Demo:

Znáte někoho, komu by článek mohl pomoct? Zasdílejte mu ho :)