Mai multe forme pot fi create folosind desenul SVG. Un desen SVG poate utiliza și combina șapte forme: Cale, Dreptunghi, Cerc, Elipsă, Linie, Polilinie și Poligon.

cale

path elementul este cel mai frecvent văzut și este de obicei generat de programe concepute pentru a exporta codul SVG.

  <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />

Exemplul path de mai sus va genera un simbol „plus” (+) atunci când este utilizat într-un desen SVG. SVG path elementele nu sunt construite manual, ci sunt generate prin programe de proiectare care pot manipula grafica vectorială, cum ar fi Illustrator sau Inkscape.

Dreptunghi

Elementul dreptunghiular rect desenează un dreptunghi pe ecran și acceptă șase atribute.

  <rect x="0" y="0" width="100" height="50" rx="10" ry="10" />

x și y atribuiți poziția colțului din stânga sus al dreptunghiului și width și height atribuiți dimensiunea dreptunghiului. rx și ry atribuiți raza colțurilor dreptunghiului, similar cu proprietatea CSS border-radius.

Cerc

Elementul cercului circle acceptă trei atribute.

  <circle cx="100" cy="100" r="50" />

cx și cy atribuiți poziția centrului cercului și r atribuie raza (dimensiunea) cercului.

Elipsă

Elementul elipsă, ellipse, este similar cu circle elementul cu excepția razei este împărțit în două atribute.

  <ellipse cx="100" cy="100" rx="50" ry="20" />

Din nou, cx și cy atribuiți poziția centrului elipsei și acum rx și ry atribuiți raza orizontală și verticală a elipsei, respectiv. Unul mai mare rx va da o elipsă „grasă” și una mai mare ry va da o elipsă mai slabă. Dacă rx și ry sunt egale, va forma un cerc.

Linia

line elementul este simplu și acceptă patru atribute.

  <line x1="0" x2="100" y1="50" y2="70" />

x1 și y1 atributele atribuie primul punct al liniei și x2 și y2 atributele atribuie al doilea punct al liniei.

Polilinie

A polyline este o serie de linii drepte conectate, atribuite într-un singur atribut.

  <polyline points="0 100, 50 70, 60 40, 20 0" />

points atributul atribuie o listă de puncte, fiecare punct separat printr-o virgulă.

Poligon

polygon elementul este, de asemenea, o serie de linii drepte conectate, dar în acest caz, ultima linie se va reconecta automat la punctul inițial.

  <polygon points="0 100, 50 70, 60 40, 20 0" />

Acest exemplu va desena aceeași formă ca polyline de mai sus, dar va trasa o linie suplimentară pentru a „închide” seria de linii.

Mai multe informatii

Documentație MDN: MDN