Základy SVG

Publikováno Webdesign

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:



    
        Struktura SVG
        
    
    
        
            
        
    

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:


Miluju SVG

Komentáře