Wzorzec 10

SVG, które zna swoje miejsce

Osadzone svg bez wymiarów dostaje domyślne 300 na 150 pikseli i skacze, gdy dotrze plik albo stylowanie, a bez viewBox nie skaluje się wcale. Trójka viewBox, wymiary i aspect-ratio rezerwuje miejsce tak samo jak przy bitmapach. Ikony zszywa z typografią rozmiar w em i kolor z currentColor, a vector-effect pilnuje, żeby kreska ilustracji nie tyła przy powiększeniu.

Kreska i ikona pod kontrolą

Zwężaj i rozszerzaj ramkę za prawy dolny róg. Oba szkice płyną z kontenerem dzięki viewBox, ale w lewym kreska tyje i chudnie razem ze skalą, a w prawym vector-effect: non-scaling-stroke trzyma stałe 1.5 piksela. Niżej jedna ikona zegara rośnie razem z typografią.

✕ Kreska ze skalą

✓ non-scaling-stroke

Ikona w em przy text-fluid-xs

Ta sama ikona przy text-fluid-base

I przy text-fluid-xl, w kolorze z currentColor

Ikona ma width i height równe 1em oraz stroke z currentColor, więc rozmiar i kolor bierze z tekstu, obok którego stoi. Żadna z trzech linii nie zna pojęcia rozmiaru ikony.

Reguły

Każde svg ma viewBox, a osadzane przez img także width i height, więc przeglądarka zna proporcje przed pobraniem pliku.
Grafika płynie z kontenerem przez inline-size 100% i block-size auto, a proporcje trzyma aspect-ratio zgodne z viewBox.
Ikony w tekście i przyciskach mierzą się w em i dziedziczą kolor przez currentColor, więc rosną i przebarwiają się razem z typografią.
Kreska ilustracji dostaje vector-effect: non-scaling-stroke, więc trzyma grubość niezależnie od skali kontenera.

Wzorzec w kodzie

Ilustracja: wymiary w znaczniku, proporcje w CSS, kreska poza skalą

<img src="/diagram.svg" width="800" height="450" alt="..." />

.ilustracja {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 800 / 450;
}

.ilustracja path {
  vector-effect: non-scaling-stroke;
}

Ikona: rozmiar z em, kolor z currentColor

<svg viewBox="0 0 24 24" width="1em" height="1em"
     fill="none" stroke="currentColor" aria-hidden>
  <circle cx="12" cy="12" r="9" />
  <path d="M12 7v5l3.5 2.5" />
</svg>

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia

Zaimplementuj w moim projekcie wzorzec „SVG, które zna swoje miejsce" z metodologii Liquid Design.

viewBox daje proporcje, wymiary rezerwują miejsce, ikony mierzą się w em i dziedziczą currentColor, a non-scaling-stroke pilnuje kreski przy każdej skali.

Wymagania:
- Każde svg ma viewBox, a osadzane przez img także width i height, więc przeglądarka zna proporcje przed pobraniem pliku.
- Grafika płynie z kontenerem przez inline-size 100% i block-size auto, a proporcje trzyma aspect-ratio zgodne z viewBox.
- Ikony w tekście i przyciskach mierzą się w em i dziedziczą kolor przez currentColor, więc rosną i przebarwiają się razem z typografią.
- Kreska ilustracji dostaje vector-effect: non-scaling-stroke, więc trzyma grubość niezależnie od skali kontenera.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy — zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/svg