Podstawowe kształty SVG — rect, circle i path

SVG używa układu współrzędnych, w którym punkt (0,0) znajduje się w lewym górnym rogu. Wartość X rośnie w prawo, a wartość Y w dół. Obszar widoku określają atrybuty width i height, natomiast przestrzeń współrzędnych określa atrybut viewBox.

Prostokąty można rysować za pomocą <rect x="10" y="10" width="200" height="100" rx="8" ry="8">. Atrybuty rx i ry zaokrąglają narożniki. Wypełnieniem i obrysem sterują atrybuty fill i stroke lub reguły CSS. Pominięcie x i y oznacza domyślnie wartości 0,0.

Okręgi można rysować za pomocą <circle cx="100" cy="100" r="50">. cx i cy określają współrzędne środka, a r oznacza promień. Okręgi SVG nie mają odpowiedników parametrów kątowych łuku z canvas — zawsze są pełnymi okręgami.

Elipsy można rysować za pomocą <ellipse cx="100" cy="100" rx="80" ry="40">. rx oznacza promień poziomy, a ry — promień pionowy. Elipsa, w której rx i ry mają tę samą wartość, jest równoważna okręgowi.

<line x1="0" y1="0" x2="100" y2="100"> rysuje pojedynczy odcinek. <polyline points="0,0 100,50 200,0"> rysuje połączone odcinki przechodzące przez serię par współrzędnych. Żaden z tych elementów nie jest automatycznie zamykany.

<polygon points="100,10 190,190 10,190"> działa podobnie jak polyline, ale kształt jest automatycznie zamykany — ostatni punkt zostaje połączony z pierwszym. Element polygon służy do tworzenia zamkniętych kształtów, takich jak trójkąty, gwiazdy i inne wielokąty foremne.

path to najbardziej wszechstronny kształt SVG — może przedstawiać dowolną kombinację linii, łuków i krzywych. Atrybut d zawiera polecenia ścieżki: M (moveTo), L (lineTo), A (arc), C (krzywa Béziera trzeciego stopnia), Q (krzywa Béziera drugiego stopnia), Z (closePath).

Polecenia zapisane wielkimi literami używają współrzędnych bezwzględnych, a zapisane małymi literami — współrzędnych względnych. M 100 50 przenosi punkt do (100,50). L 200 150 rysuje linię do (200,150). Z zamyka ścieżkę. A rx ry rotation large-arc sweep x y rysuje łuk.

Kształty SVG obsługują właściwości CSS: fill, stroke, stroke-width, opacity i stroke-dasharray. Aby zachować łatwość utrzymania stylów, należy używać klas CSS na elementach SVG. Przejścia CSS działają w SVG dla fill, stroke i opacity, umożliwiając płynne zmiany stanu.

Element <g> grupuje elementy SVG. Zastosowanie transform, fill lub stroke do grupy wpływa na wszystkie jej elementy potomne. Grupowanie umożliwia łączenie złożonych kształtów, które poruszają się lub są przekształcane razem — na przykład tarczy zegara wraz ze wszystkimi jej elementami.

W elemencie <defs> można definiować kształty wielokrotnego użytku: symbole, gradienty i ścieżki przycinania. Odwołuj się do nich za pomocą <use href="#id">. Pozwala to uniknąć powielania złożonych danych ścieżek oraz stosować transformacje i style na poziomie instancji za pomocą elementu use.

Jaka jest różnica między polyline a polygon w SVG?

SVG udostępnia deklaratywne elementy kształtów (rect, circle, ellipse, line, polyline, polygon) oraz wszechstronny element path do tworzenia złożonych kształtów za pomocą poleceń M, L, A, C, Q i Z. Style CSS, grupowanie za pomocą g oraz ponowne użycie przez defs/use umożliwiają tworzenie łatwej w utrzymaniu, skalowalnej grafiki wektorowej osadzonej bezpośrednio w HTML.