SVG viewBox i skalowanie responsywne

width i height SVG określają rozmiar renderowany w DOM. Atrybut viewBox definiuje wewnętrzną przestrzeń współrzędnych. Są to niezależne ustawienia: viewBox o wartości "0 0 100 100" wraz z width="200" i height="200" skaluje przestrzeń współrzędnych dwukrotnie.

viewBox="min-x min-y width height". Najczęściej używana wartość to viewBox="0 0 100 100", która definiuje przestrzeń współrzędnych o wymiarach 100x100, zaczynającą się w początku układu. Wartości współrzędnych w SVG odnoszą się do tej przestrzeni, a nie do pikseli.

Aby SVG było responsywne, należy pominąć atrybuty width i height (lub ustawić je na 100%) i pozwolić, aby proporcje definiował viewBox. Należy dodać CSS: svg { width: 100%; height: auto; }. SVG skaluje się tak, aby zmieścić się w kontenerze, zachowując proporcje.

preserveAspectRatio określa sposób dopasowania viewBox do obszaru widoku SVG, gdy proporcje są różne. Dostępne wartości to: "xMidYMid meet" (domyślna — dodaje pasy), "xMidYMid slice" (przycina obraz, aby wypełnić obszar) oraz "none" (rozciąga obraz bez zachowania proporcji).

Zmiana min-x i min-y przesuwa widoczny fragment przestrzeni współrzędnych SVG. viewBox="50 50 100 100" pokazuje obszar od (50,50) do (150,150). Umożliwia to interaktywne przesuwanie przez aktualizowanie wartości viewBox za pomocą JavaScriptu.

Aby powiększyć obraz, należy zmniejszyć wymiary viewBox: viewBox="25 25 50 50" pokazuje mniejszy obszar powiększony tak, aby wypełnić element SVG. Zwiększenie wymiarów powoduje pomniejszenie obrazu. Aktualizowanie viewBox podczas zdarzeń wheel umożliwia interaktywne powiększanie bez skalowania elementu SVG.

SVG w elemencie img skaluje się responsywnie za pomocą object-fit, ale nie można go stylować CSS-em ani obsługiwać skryptami. Wbudowane SVG jest w pełni dostępne dla CSS i JavaScriptu, ale zwiększa rozmiar HTML. Należy wybrać rozwiązanie odpowiednie do potrzeb związanych z interaktywnością.

Ikony SVG używają stałego viewBox (na przykład "0 0 24 24") i nie mają width ani height, dzięki czemu ich rozmiar można określać za pomocą CSS: .icon { width: 1.5rem; height: 1.5rem; }. viewBox zapewnia prawidłowe skalowanie ikon do dowolnego rozmiaru przy zachowaniu ostrego renderowania wektorowego.

Definiuj ikony w elementach <symbol viewBox="0 0 24 24"> wewnątrz ukrytego SVG. Odwołuj się do nich za pomocą <use href="#icon-name">. Każdy element use może mieć własne width, height, fill i color — jeden plik sprite dla wszystkich ikon.

SVG fill="currentColor" dziedziczy właściwość CSS color z elementu lub jego elementu nadrzędnego. Ustaw color: red na elemencie SVG lub jego elemencie nadrzędnym, a ikona zostanie automatycznie wypełniona kolorem czerwonym. Dzięki temu ikony jednokolorowe mogą korzystać z koloru tekstu bez stylowania właściwego dla SVG.

Jeśli zawartość SVG wydaje się przycięta lub jest nieoczekiwanie położona, należy sprawdzić lub wyświetlić wartość viewBox. Częstym błędem jest ustawienie viewBox na pikselowe wymiary grafiki źródłowej bez uwzględnienia rozmiaru renderowanego, co powoduje problemy ze skalowaniem. Należy sprawdzić, czy viewBox odpowiada rzeczywistym granicom zawartości grafiki SVG.

Jak sprawić, aby SVG responsywnie dopasowywało się do szerokości dowolnego kontenera?

viewBox SVG definiuje wewnętrzną przestrzeń współrzędnych niezależną od renderowanego rozmiaru w pikselach, umożliwiając responsywne skalowanie. Ustawienie width:100%; height:auto wraz z viewBox sprawia, że SVG dopasowuje się do dowolnego kontenera. Wzorzec sprite'a symbol+use, motywy oparte na currentColor oraz preserveAspectRatio tworzą kompletny zestaw narzędzi do elastycznego używania SVG z obsługą motywów.