Jak naprawdę działają SVG – notatki z analizy Theo #EN277

• Magia tkwi w kodzie – Umieszczenie SVG inline pozwala na modyfikację przez CSS i JavaScript, w przeciwieństwie do użycia w tagu img
• ViewBox to klucz – Tworzy wewnętrzny układ współrzędnych, rozwiązuje problemy z przycinaniem i skalowaniem
• SVG to nie piksele – Składają się z instrukcji rysowania, można powiększać bez utraty ostrości
• Eksport to pułapka – Narzędzia graficzne często tworzą jeden skomplikowany path, uniemożliwiając animowanie części
• Stroke ma supermoce – stroke-dasharray i stroke-dashoffset dają kontrolę nad animacją linii
• Efekt „rysowania” – Tworzy się trickiem z długim dashem „wsuwanych” przez stroke-dashoffset

Wprowadzenie

Ten artykuł stanowi zbiór notatek z komentarza wideo Theo do artykułu Josh Comeau „A Friendly Introduction to SVG”. Theo krok po kroku analizuje materiał edukacyjny, dzieląc się własnymi spostrzeżeniami i doświadczeniami z pracy z SVG. Wszystkie przedstawione tu przemyślenia, obserwacje i przykłady pochodzą z jego analizy.

SVG to format pozwalający reprezentować grafikę w nieskończenie wysokiej rozdzielczości przy minimalnej ilości danych. Theo zauważa, że większość programistów zna go powierzchownie – otwierali pliki, zmieniali kolory fill, eksportowali z Figmy. Jednak pisanie SVG od podstaw pozostaje dla wielu zagadką. Podobnie AI ma z tym trudności.

SVG jako kod HTML, nie tylko obrazek

W przeciwieństwie do formatów binarnych jak JPEG czy GIF, SVG wykorzystuje składnię XML identyczną z HTML. Zamiast określać kolor RGB każdego piksela, zawiera instrukcje rysowania ilustracji.

Prawdziwa moc ujawnia się przy wklejaniu surowego kodu SVG bezpośrednio do dokumentu HTML. Comeau podkreśla fundamentalną różnicę: SVG funkcjonuje jak alternatywna rzeczywistość HTML, skupiona na ilustracjach zamiast dokumentów. W rezultacie elementy SVG stają się pełnoprawnymi obywatelami DOM – można je stylować CSS-em oraz manipulować JavaScriptem.

circle {
  fill: hotpink;
  transition: all 300ms;
}

circle:hover {
  fill: red;
  cx: 60;
  cy: 60;
}

Wiele atrybutów SVG (kolor koła, promień) może działać jako właściwości CSS. Dlatego można je zmieniać w arkuszach stylów, a nawet używać transitions do animowania. To właśnie czyni SVG tak potężnym narzędziem.

Primitive shapes – kształty podstawowe

HTML oferuje elementy dokumentów (paragrafy, nagłówki, listy), podczas gdy SVG dostarcza kształty geometryczne: circle, polygon, path.

Linie prostsze niż w HTML

Według Comeau, tworzenie diagonalnej linii w HTML to matematyczny koszmar. Trzeba stworzyć długi, cienki element DOM i obrócić go, co szybko przekształca się w zaawansowany problem matematyczny przy konkretnych punktach początkowych i końcowych.

SVG rozwiązuje to dwoma współrzędnymi:

<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2" />

W ten sposób osiągamy efekt praktycznie niemożliwy w czystym HTML. Comeau szczerze przyznaje, odnosząc się do swojego projektu Dogecoin Simulator: tworzenie rzeczy w HTML wykraczających poza proste linie czy border-radius to istna męka.

Prostokąty i ich osobliwości

Prostokąty mają charakterystyczną właściwość – stroke rysuje się zawsze na środku ścieżki, nie wewnątrz ani na zewnątrz. Połowa grubości konturu znajduje się wewnątrz kształtu, połowa na zewnątrz. Tego zachowania nie da się skonfigurować. To rozwiązuje problemy z border-box z CSS, jednak wymaga innego myślenia o pozycjonowaniu.

Comeau zwraca uwagę na „degenerate shapes” – gdy szerokość lub wysokość spada do zera, cały kształt znika. Mimo surowej nazwy, to po prostu specyfikacja: dwuwymiarowy kształt rozciągnięty w jednym wymiarze uznawany jest za nieważny i nie renderuje się.

Koła, elipsy i wielokąty

Koła pozycjonujemy przez centrum (cx, cy) plus promień, co jest logiczne, ale utrudnia pozycjonowanie względem prostokątów używających x, y dla górnego lewego rogu. Przy zerowym promieniu lub wymiarze kształt całkowicie znika.

Polygon przyjmuje listę punktów XY:

<polygon points="0,0 100,0 100,100 0,100" />

Comeau przyznaje, że jego rozumienie „polygon” oznaczało kształty z symetrią obrotową jak trójkąty czy sześciokąty. To regularne wielokąty – podzbiór szerszego świata polygonów. Jednak do ich tworzenia potrzebna jest trygonometria.

Formatowanie dla czytelności

Większość SVG w internecie prezentuje się nieczytelnie:

<polygon points="0 0 100 0 100 100 0 100" />

Comeau stanowczo zachęca do formatowania:

<polygon points="
  0,0
  100,0
  100,100
  0,100
" />

Dawniej takie optymalizacje miały znaczenie dla wydajności. Współczesne serwery używają jednak kompresji gzip, przez co dodatkowe przecinki i nowe linie nie wpływają na rozmiar pliku. Użytkownicy nie zauważą różnicy, ale inni programiści będą wdzięczni za czytelne SVG.

ViewBox – wewnętrzny układ współrzędnych

Do tej pory używaliśmy bezwzględnych współrzędnych, co oznacza, że SVG musi mieć konkretny rozmiar, inaczej się psuje.

Comeau pokazuje klasyczny problem: koło ustawione na środku elementu 300px. Gdy element się zmniejsza, koło nie skaluje się, lecz zostaje przycięte. To nie tak działają inne obrazy – JPEG skaluje się z rozmiarem elementu.

ViewBox definiuje wewnętrzny układ współrzędnych. Po jego ustawieniu kształty przestają dziedziczyć surowe wartości pikseli z DOM i zaczynają używać wewnętrznego systemu.

ViewBox przyjmuje cztery liczby, ale łatwiej myśleć o nich jak o dwóch parach: górny lewy róg (0, 0) i dolny prawy róg (300, 220). Comeau używa analogii: ViewBox działa jak viewport. Blog jest wyższy niż okno przeglądarki, więc część lekcji pokazuje się w viewporcie. Możesz zmienić widoczną część przewijając.

Podobnie z ViewBox – decyduje, którą część nieskończonego pola SVG oglądamy. Comeau podkreśla ważną koncepcję: SVG nie mają krawędzi, teoretycznie rozciągają się nieskończenie w każdym kierunku. Nic nie powstrzymuje przed umieszczeniem kształtu milion pikseli od punktu pochodzenia.

Druga para wartości – poziom przybliżenia

Druga para wartości kontroluje szerokość i wysokość widocznego obszaru. Nie zmienia rozmiaru SVG (to robią width i height), ale poziom przybliżenia.

W demo Comeau pokazuje SVG 300×300. Przy ViewBox 0 0 300 300 mamy idealne 1:1. Z kolei 0 0 150 150 daje SVG wciąż 300×300 pikseli, ale pokazuje tylko strefę 150×150 z płótna SVG.

To jak zoom w przeglądarce – Command/Ctrl + lub – nie zmienia rozmiaru okna, ale skaluje zawartość do 2x oryginalnego rozmiaru.

Comeau przyznaje szczerze, że nigdy nie używał ViewBox do dynamicznego przesuwania czy zoomowania (jedyny przypadek: przewodnik po gigantycznym wykresie). Wartość leży w zrozumieniu mechanizmu – w praktyce te wartości pozostają statyczne.

Można zoomować bez utraty ostrości. To magiczne uczucie – przybliżenie 10x czy 100x, a obraz wciąż wygląda ostro.

Stroke attributes – zaawansowane obramowania

Kształty mogą być wypełnione (fill) lub obrysowane (stroke), albo jedno i drugie. Fill jest oczywisty, dlatego skupmy się na stroke. Przypominają HTML-owe bordery, ale są znacznie potężniejsze.

Podstawowe właściwości:

• stroke – kolor (domyślnie transparent)
• stroke-width – grubość w pikselach
• stroke-dasharray – szerokość segmentu i odstępu między nimi
• stroke-linecap – zakończenia kresek (butt, round, square)

Stroke-dasharray i wzory

Można ustawić dwie wartości jak 10 20 – kreska 10px z odstępem 20px. Można też określić powtarzający się wzór z więcej wartościami.

Comeau pokazuje wzór: 0 20 26 60 – daje kropkę, odstęp 20px, długą kreskę 26px i odstęp 60px. Początkowo mylące – dlaczego kropka przy wartości zero? Okazuje się, że nawet przy zero coś się pokazuje, bo to punkt na ścieżce.

Ciekawostka: ze standardowym stroke-linecap: butt wartości zero rzeczywiście znikają. Jednak ze square czy round pojawiają się jako kropki.

Animacje stroke

Można płynnie przechodzić między stylami stroke używając zwykłych CSS transitions. Comeau pokazuje też animację nieskończoną z stroke-dashoffset, który przesuwa kreski wokół kształtu.

Najsłynniejszy efekt? Iluzja SVG „rysującego się”.

Efekt rysowania się – mechanizm krok po kroku

Sprytny sposób polega na kresce o długości całego obwodu kształtu (763 piksele w przykładzie Comeau) i ogromnym odstępie między kreskami. „Rysujemy” kształt przesuwając kreskę na miejsce przez animowanie stroke-dashoffset.

Implementacja:

Krok 1: Pobierz długość ścieżki

const pathLength = polygon.getTotalLength(); // Magiczna metoda!

Krok 2: Ustaw dash array i offset

stroke-dasharray: [pathLength] 999999;
stroke-dashoffset: [pathLength];

Krok 3: Animuj do zera

transition: stroke-dashoffset 2s;

Comeau wspomina atrybut pathLength, który pozwala zdefiniować własną skalę (np. 100 zamiast rzeczywistych 763). Pozwala to ręcznie „oszukać” przeglądarkę i znacznie upraszcza obliczenia przy tworzeniu animacji w CSS. Mimo to przyznaje, że to dziwne – w zasadzie kłamiemy przeglądarce o prawdziwej długości ścieżki.

Alternatywa? Trial and error – zgadywanie długości aż wygląda dobrze.

Pisanie SVG ręcznie versus narzędzia graficzne

Comeau wprost stwierdza – może wydawać się nieintuicyjne, ale często tworzy SVG w edytorze kodu zamiast w Illustratorze czy Figmie. Oprogramowanie graficzne eksportuje do SVG, ale zwykle łączy wszystko w jeden element path. To utrudnia animowanie poszczególnych elementów, co jest najfajniejszą rzeczą w SVG.

Zależy od projektu. Poza pewnym poziomem złożoności praktyczniejsze jest specjalistyczne oprogramowanie. Jednak dla rzeczy pokazanych w materiale Comeau uważa kodowanie ręczne za łatwiejsze.

Praktyczny przykład – spinner loading

Comeau demonstruje elegancki spinner używając poznanych technik:

@keyframes rotate {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: rotate 1.5s linear infinite;
  stroke-dasharray: 80 200;
  stroke-dashoffset: 0;
}

Animowanie długości i przesunięcia kresek tworzy efekt wirującego loadera. Bez JavaScriptu – wszystko w CSS.

Rozwiązywanie typowych problemów

Co sprawdzić gdy SVG nie działa:

• Linie niewidoczne – domyślnie mają transparent stroke, dodaj kolor
• SVG się przycina – prawdopodobnie brak ViewBox przy zmianie rozmiaru
• Kształt zniknął – sprawdź czy width/height/radius nie są zerem
• Dash się nie renderuje – kombinacja 0 z stroke-linecap: butt
• Wszystko poza ekranem – współrzędne poza ViewBox

Praktyczne wskazówki

Aby w pełni wykorzystać potencjał SVG:

• Wybieraj kod inline dla interaktywności – gdy planujesz animację, umieszczaj kod bezpośrednio w HTML
• Zawsze definiuj viewBox – najlepszy sposób na responsywność i uniknięcie problemów ze skalowaniem
• Uważaj na kod z eksportu – często wymaga ręcznego uproszczenia dla animacji pojedynczych części
• Formatuj kod dla czytelności – kompresja gzip eliminuje koszty, ale czytelność pozostaje

Perspektywy rozwoju

Comeau przyznaje – to dopiero zarys możliwości. Pracuje nad kursem o animacjach, gdzie SVG stanowi ogromną część.

Fundamenty są jednak kluczowe:

• SVG jako XML wbudowany w HTML
• ViewBox jako wewnętrzny układ współrzędnych
• Primitive shapes jako budulec
• Stroke attributes jako narzędzie do animacji

Z tą wiedzą można tworzyć rzeczy niemożliwe w czystym HTML – od custom borders po interaktywne ilustracje.

Comeau, jako jeden z najlepszych nauczycieli CSS w branży, zamiast tylko sprzedawać wiedzę jako usługę, tworzy materiały edukacyjne. To szczęście dla całej społeczności. Jego kursy (CSS for JS Devs, Joy of React) są legendarne. Dlatego warto wspierać jego istnienie – nawet bez natychmiastowego wykorzystania kursów.

Kluczowy insight

Graficzne narzędzia rujnują SVG

Standardowo myślimy: Skoro robimy grafikę, używamy narzędzi graficznych – Figma, Illustrator, Sketch. To oczywiste.

W praktyce okazuje się, że: Oprogramowanie graficzne eksportuje SVG jako jeden wielki path element, co uniemożliwia kontrolowanie i animowanie poszczególnych części. Comeau często tworzy SVG w edytorze kodu zamiast w graficznych narzędziach.

Dlaczego to istotne: Tracisz najfajniejszą część SVG – możliwość stylowania i animowania każdego elementu osobno przez CSS i JavaScript. To jak kupować Ferrari i używać go tylko w korku.

Test na jutro: Następnym razem gdy potrzebujesz prostej, animowanej ikony, zamiast projektować ją w edytorze graficznym i eksportować, spróbuj napisać ją ręcznie od zera używając prymitywów <circle>, <rect> i <line> i sprawdź, o ile łatwiej jest dodać do niej interakcje i przejścia CSS.

Ten wpis jest częścią mojej kolekcji notatek z ciekawych podcastów, webinarów i innych treści, które uważam za wartościowe i do których sam chcę wracać. Materiał powstał na podstawie komentarza wideo „I finally get how SVGs work” do oryginalnego artykułu Josh Comeau „A Friendly Introduction to SVG”.