SVG: definicja, kluczowe pojęcia i zastosowanie w tworzeniu stron internetowych

Czym jest SVG?

SVG — format grafiki wektorowej oparty na XML, który pojawił się w 2001 roku jako rekomendacja W3C. W przeciwieństwie do formatów rastrowych, SVG opisuje obraz poprzez geometryczne prymitywy: punkty, linie, krzywe i wielokąty. Plik SVG to zwykły tekstowy dokument XML, który można czytać, edytować i kompresować standardowymi narzędziami.

Architektura SVG obejmuje kilka kluczowych koncepcji. viewBox określa wirtualny układ współrzędnych, niezależny od rzeczywistych rozmiarów elementu. Na przykład viewBox="0 0 100 100" tworzy kwadratową siatkę 100×100, wewnątrz której wszystkie współrzędne są stałe. Przy zmianie szerokości lub wysokości kontenera zawartość skaluje się proporcjonalnie.

Według W3C SVG 2 Specification, nowoczesna wersja SVG obsługuje gradienty, maski, filtry, tekst z dowolnym pozycjonowaniem, interaktywność przez JavaScript i animację przez CSS i SMIL. SVG jest zintegrowany z DOM jako pełnoprawny element HTML, co umożliwia programowe zarządzanie każdym prymitywem graficznym.

W programowaniu mobilnym SVG jest również używane w iOS przez UIGraphicsImageRenderer i w Android przez VectorDrawable — oba formaty konwertują opisy podobne do SVG na sprzętowo przyspieszone rastery na GPU.

Historia i rozwój formatu SVG

SVG 1.0 stało się rekomendacją W3C w 2001 roku, SVG 1.1 — w 2003 roku, SVG 2.0 jest w fazie rozwoju od 2012 roku. Główną nowością SVG 2 jest głębsza integracja z CSS, obsługa compositing i blending modes oraz możliwość używania SVG w HTML bez prefiksów namespace.

Pomimo że SVG 2 nie osiągnął jeszcze statusu Recommendation, nowoczesne przeglądarki już obsługują większość jego funkcjonalności. Chrome, Safari, Firefox i Edge mają praktycznie pełną obsługę SVG 1.1 i znaczną część SVG 2.

Podstawowe elementy SVG

SVG udostępnia zestaw elementów do opisu grafiki dwuwymiarowej. Każdy element ma atrybuty określające jego położenie, rozmiar i wygląd wizualny. Atrybuty mogą być określone jako atrybuty XML lub przez właściwości CSS.

• <rect> — prostokąt z atrybutami x, y, width, height, rx, ry (zaokrąglenie rogów).
• <circle> — okrąg z atrybutami cx, cy (środek) i r (promień).
• <ellipse> — elipsa z atrybutami cx, cy, rx, ry.
• <line> — odcinek z atrybutami x1, y1, x2, y2.
• <polyline> — linia łamana z atrybutem points (lista współrzędnych).
• <polygon> — zamknięty wielokąt z atrybutem points.
• <path> — dowolny kontur z atrybutem d (komendy: M, L, C, Q, A, Z).
• <text> — element tekstowy z atrybutami x, y, font-size, font-family.

Element path — najpotężniejszy i najbardziej elastyczny element SVG. Atrybut d zawiera sekwencję komend: M (moveTo), L (lineTo), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), Z (close path). Każda komenda ma formę absolutną lub względną (wielka lub mała litera).

SVG obsługuje również grupowanie elementów przez <g>. Grupa dziedziczy atrybuty wizualne (fill, stroke, transform) na wszystkie elementy potomne. Umożliwia to zastosowanie jednolitego stylu do całego zestawu kształtów i zarządzanie ich położeniem przez jeden transform.

SVG a grafika rastrowa: porównanie formatów

Podstawowa różnica między SVG a formatami rastrowymi (JPEG, PNG, WebP) — sposób przechowywania informacji. Raster przechowuje kolory każdego piksela w siatce o stałym rozmiarze. SVG przechowuje matematyczne komendy do odtworzenia kształtów. Ta różnica określa wszystkie zalety i wady formatów.

Według HTTP Archive, 2025, 68% stron internetowych używa SVG do ikon, 34% — do ilustracji i 22% — do logo. Średni rozmiar ikony SVG wynosi 0.5–2 KB, podczas gdy rastrowa ikona o podobnej jakości — 5–20 KB w formacie PNG.

Do zdjęć i złożonych obrazów rastrowych SVG się nie nadaje — rozmiar opisu XML przekroczy rozmiar równoważnego JPEG. Zalecany obszar zastosowania SVG: ikony, logo, ilustracje, schematy, wykresy, elementy interfejsu z adaptacyjnym designem.

Kiedy wybrać SVG, a kiedy format rastrowy

SVG — optymalny wybór dla elementów interfejsu, które muszą wyglądać ostro na ekranach Retina i przy dowolnym powiększeniu przeglądarki. Raster — dla zdjęć, złożonych tekstur i obrazów z milionami kolorów, gdzie opis wektorowy byłby nieuzasadniony złożony.

Podejście hybrydowe — kombinacja SVG dla elementów interfejsu i WebP/AVIF dla treści fotograficznych — daje najlepszy balans między jakością a wydajnością ładowania strony.

Inline SVG i stylizacja przez CSS

Inline SVG — to osadzenie znaczników SVG bezpośrednio w dokumencie HTML, a nie jako osobny plik przez <img> lub background-image. Zaletą inline SVG jest to, że elementy SVG stają się częścią DOM i mogą być stylizowane przez CSS, zarządzane przez JavaScript i animowane bez dodatkowych żądań do serwera.

W przeciwieństwie do <img src="icon.svg">, gdzie SVG jest izolowany w shadow DOM, inline SVG dziedziczy kolory i czcionki dokumentu nadrzędnego. Umożliwia to na przykład zmianę koloru ikony przy najechaniu przez pseudoklasę CSS :hover bez ładowania osobnego pliku dla każdego stanu.

Według CSS-Tricks, inline SVG to zalecany sposób używania ikon w nowoczesnych aplikacjach internetowych. Właściwości CSS fill, stroke, stroke-width są stosowane do elementów SVG bezpośrednio. Do personalizacji przez CSS ważne jest, aby w źródłowym SVG nie były ustawione fill i stroke jako atrybuty inline — w przeciwnym razie CSS nie będzie mógł ich nadpisać.

• Zalety: stylizacja przez CSS, zarządzanie przez JS, brak żądań HTTP, adaptacyjność viewBox.
• Wady: zwiększenie rozmiaru strony HTML, brak możliwości buforowania oddzielnie od HTML.
• Alternatywa: SVG-sprite'y — połączenie wielu SVG w jeden plik i użycie <use href="#id">.

SVG-sprite'y rozwiązują problem buforowania: wszystkie ikony są zbierane w jeden plik, przeglądarka ładuje go raz, a poszczególne ikony są podłączane przez <use> z podaniem id potrzebnego elementu wewnątrz sprite'a.

Animacja SVG: CSS i SMIL

Animacja CSS SVG — najpopularniejszy i najbardziej wydajny sposób animacji grafiki wektorowej w przeglądarce. Właściwości CSS, takie jak transform, opacity i fill, są stosowane do elementów SVG tak samo jak do elementów HTML. Do animacji wzdłuż dowolnej ścieżki używa się właściwości CSS offset-path.

SMIL (Synchronized Multimedia Integration Language) — wbudowany w SVG mechanizm animacji, niezależny od CSS. Elementy <animate>, <animateTransform> i <animateMotion> umożliwiają animację dowolnych atrybutów SVG bez JavaScript i CSS. Animacja SMIL jest gwarantowanie zsynchronizowana z częstotliwością klatek przeglądarki.

Według MDN Web Docs, SMIL jest obsługiwany we wszystkich nowoczesnych przeglądarkach, ale animacja CSS jest uważana za bardziej przewidywalną i wydajną. Główny scenariusz dla SMIL — animacja atrybutów, które są niedostępne przez CSS, na przykład d (path) elementu <path>.

JavaScript + requestAnimationFrame daje maksymalną kontrolę nad animacją SVG. Twórcy stron internetowych używają bibliotek GSAP i Anime.js do złożonych sekwencji animacji z liniami czasu i funkcjami easing, które są trudne do zrealizowania przez czysty CSS.

Przykłady kodu: tworzenie grafiki SVG

Pierwszy przykład — prosta ikona domku z użyciem podstawowych elementów SVG. Wszystkie kształty to rect i polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Drugi przykład — animacja obrotu loadera przez CSS. Użyto <circle> z atrybutem stroke-dasharray do tworzenia przerywanego konturu:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Trzeci przykład — animacja path przez bibliotekę GSAP do płynnego rysowania konturu. GSAP pracuje z atrybutem stroke-dashoffset, tworząc efekt pojawiania się linii:

// Narysuj ścieżkę z GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});