SVG od środka.
Nie uczysz się rysować ikon. Uczysz się języka, z którego są zbudowane.
Od viewBox i pierwszego path, przez gradienty i animacje,
aż po bezpieczeństwo i pracę z AI.
<svg viewBox="0 0 520 300"> <path d="M96 220 C190 64 336 224 418 78" stroke="url(#gradient)" /> </svg>
Zmieniasz kod. Widzisz konsekwencję.
Każda lekcja korzysta z tego samego playgroundu. Zmienia się tylko preset: raz jest nim viewBox, raz Bézier, raz maska, filtr albo animacja. Dzięki temu uczysz się SVG, a nie kolejnego interfejsu.
<svg viewBox="0 0 200 120"> <circle cx="100" cy="60" r="38" fill="none" stroke="currentColor" /> </svg>
Od punktu do żywego dokumentu.
Kolejne bloki zmieniają samą naturę SVG: najpierw poznajesz przestrzeń, potem wygląd, ruch i na końcu zasady, dzięki którym plik nadaje się do prawdziwego wdrożenia.
Anatomia
Jak SVG myśli o przestrzeni i kształcie.
Układ współrzędnych i viewBox
Dlaczego SVG się skaluje, choć nic w rysunku się nie zmienia. width/height vs viewBox, jednostki i preserveAspectRatio.
Kształty podstawowe
rect, circle, ellipse, line, polyline, polygon. Krótka lekcja-słownik i referencja.
path, część 1: linie
M, L, H, V, Z. Wielkie i małe litery — moment, w którym d przestaje być magią.
path, część 2: krzywe
C, S, Q, T. Punkty kontrolne przyciągają krzywą, ale nie leżą na niej.
path, część 3: łuki
A i jej siedem argumentów. Najtrudniejsza komenda w SVG oraz dwie flagi, które psują wszystkim życie.
Wygląd
Jak geometria dostaje charakter.
fill i stroke
stroke-width, linecap, linejoin, fill-rule i pytanie, dlaczego środek gwiazdy bywa dziurawy.
stroke-dasharray
Kreska, przerwa i offset. Fundament pod animację rysowania ścieżki.
Transformacje
translate, rotate, scale, skew. Kolejność ma znaczenie, a oś obrotu nie zawsze jest tam, gdzie się wydaje.
Gradienty i wzory
linearGradient, radialGradient, pattern. Gradient jest osobnym obiektem, nie kolorem.
Maski i clipPath
Różnica między obcięciem a maską: kształt kontra jasność. Kiedy użyć którego mechanizmu.
Filtry
feGaussianBlur, feDropShadow, feColorMatrix, feTurbulence. Najbardziej efektowna lekcja kursu.
Życie
Jak statyczny rysunek zaczyna reagować.
Trzy drogi animacji
SMIL vs CSS vs JavaScript. Co czym animować i dlaczego SMIL nie umarł, choć miał.
Efekt rysowania linii
pathLength, getTotalLength() i animowany dashoffset. Lekcja, po której robisz własne intro.
defs, use, symbol
Sprite ikonowy: jeden plik, dwadzieścia ikon, zero powtórzeń.
Tekst i textPath
Tekst po krzywej. Pułapka fontów: dlaczego napis wygląda inaczej u klienta i kiedy zamienić go na ścieżki.
SVG a CSS
Inline vs <img> vs background. currentColor, dark mode i ikony reagujące na otoczenie.
Higiena
Jak zrobić SVG, które można naprawdę wdrożyć.
Optymalizacja
Co eksporter dopisuje niepotrzebnie, co wolno wyciąć, a co wygląda jak śmieć i nim nie jest.
Dostępność
role="img", title, desc, aria-labelledby i ikony dekoracyjne. Krótko i konkretnie.
Bezpieczeństwo
Sanityzacja i XSS w „obrazku”. Playground robi to samo przy każdym renderze — pokazujemy własny kod jako przykład.
SVG a agenci AI
Format graficzny, który model potrafi nie tylko zobaczyć, ale też przeczytać i napisać, bo pod spodem nadal jest tekstem.
Jeden warsztat. Dwadzieścia eksperymentów.
W każdej lekcji otwierasz ten sam komponent, ale z innym presetem. Nie uczysz się kolejnego narzędzia. Zmieniasz parametr i od razu widzisz, co naprawdę robi.
<path
d="M30 160
C110 30 230 290 330 90"
fill="none"
stroke="currentColor"
stroke-width="8"
stroke-dasharray="18 12"
stroke-dashoffset="24"
/>
SVG przestaje wyglądać jak tajemniczy ciąg znaków.
To nie jest nauka zapamiętywania parametrów. Chodzi o to, żeby po otwarciu pliku wiedzieć, gdzie jest geometria, gdzie wygląd, gdzie ruch i gdzie zaczyna się problem.
<path d="M13.4 27.1 C18.2 3.6 42.7 51.9 71.4 14.2..." /> ??? „co to w ogóle robi?”
M — idź do punktu C — narysuj krzywą Z — zamknij kształt stroke — obrys fill — wypełnienie „okej, wiem co robi.”
A potem okazuje się, że SVG ma jeszcze jednego czytelnika.
JPEG daje modelowi obraz. SVG może dać mu także strukturę: elementy, współrzędne, tekst, relacje i kod. Model może taki dokument przeczytać, zmienić i wygenerować ponownie. To właśnie tutaj kurs SVG łączy się z tematami WebFluxa.
Zobacz pierwszy punkt. Reszta zacznie się układać.
Nie potrzebujesz Illustratora. Nie potrzebujesz biblioteki. Wystarczy przeglądarka i chęć sprawdzenia, co naprawdę dzieje się w pliku SVG.