Forme SVG di base: rect circle path

SVG utilizza un sistema di coordinate in cui (0,0) corrisponde all'angolo superiore sinistro. X aumenta verso destra; Y aumenta verso il basso. Il viewport è definito dagli attributi width e height; lo spazio delle coordinate è definito dall'attributo viewBox.

Disegnate rettangoli con <rect x="10" y="10" width="200" height="100" rx="8" ry="8">. rx e ry arrotondano gli angoli. Il riempimento e il contorno sono controllati dagli attributi fill e stroke o dal CSS. Se si omettono x e y, il valore predefinito è 0,0.

Disegnate cerchi con <circle cx="100" cy="100" r="50">. cx e cy sono le coordinate del centro; r è il raggio. I cerchi SVG non hanno un equivalente dei parametri dell'angolo dell'arco di canvas: sono sempre cerchi completi.

Disegnate ellissi con <ellipse cx="100" cy="100" rx="80" ry="40">. rx è il raggio orizzontale; ry è il raggio verticale. Un'ellisse con rx e ry uguali equivale a un cerchio.

<line x1="0" y1="0" x2="100" y2="100"> disegna un singolo segmento di linea. <polyline points="0,0 100,50 200,0"> disegna segmenti di linea collegati attraverso una serie di coppie di coordinate. Nessuno dei due viene chiuso automaticamente.

<polygon points="100,10 190,190 10,190"> è simile a polyline, ma la forma viene chiusa automaticamente: una linea collega l'ultimo punto al primo. Utilizzate polygon per forme chiuse come triangoli, stelle e altri poligoni regolari.

path è la forma SVG più potente: può rappresentare qualsiasi combinazione di linee, archi e curve. L'attributo d contiene i comandi del path: M (moveTo), L (lineTo), A (arc), C (curva di Bézier cubica), Q (curva di Bézier quadratica), Z (closePath).

I comandi in maiuscolo utilizzano coordinate assolute; quelli in minuscolo utilizzano coordinate relative. M 100 50 sposta il punto su (100,50). L 200 150 disegna una linea fino a (200,150). Z chiude il path. A rx ry rotation large-arc sweep x y disegna un arco.

Le forme SVG accettano proprietà CSS: fill, stroke, stroke-width, opacity e stroke-dasharray. Utilizzate classi CSS sugli elementi SVG per uno stile più facile da mantenere. Le transizioni CSS di SVG funzionano con fill, stroke e opacity, consentendo cambiamenti di stato fluidi.

L'elemento <g> raggruppa gli elementi SVG. Applicate transform, fill o stroke al gruppo per influenzare tutti gli elementi figli. Il raggruppamento consente di comporre forme complesse che si spostano o si trasformano insieme, come il quadrante di un orologio con tutti i suoi componenti.

Definite forme riutilizzabili in <defs>: simboli, gradienti e tracciati di ritaglio. Fatevi riferimento con <use href="#id">. In questo modo evitate di duplicare dati complessi dei path e abilitate trasformazioni e stili a livello di istanza tramite l'elemento use.

Qual è la differenza tra polyline e polygon in SVG?

SVG offre elementi dichiarativi per le forme (rect, circle, ellipse, line, polyline, polygon) e il versatile elemento path per creare forme complesse usando i comandi M, L, A, C, Q, Z. Lo stile CSS, il raggruppamento con g e il riutilizzo tramite defs/use consentono di realizzare grafiche vettoriali manutenibili e scalabili direttamente incorporate nell'HTML.