Dlaczego SVG, a nie PNG czy JPEG

Format SVG (Scalable Vector Graphics) to oparta na XML grafika wektorowa, która od lat jest standardem W3C. W przeciwieństwie do formatów rastrowych (PNG, JPEG, WebP), grafiki SVG skalują się idealnie na każdym ekranie — od smartfona po wyświetlacz 4K — bez utraty jakości i bez generowania wielu wersji tego samego obrazka.

W naszych projektach SVG jest podstawowym formatem dla ikon, logotypów, ilustracji i elementów dekoracyjnych. Pliki SVG są zazwyczaj lżejsze od ich rastrowych odpowiedników, a co najważniejsze — dają się stylować za pomocą CSS i animować JavaScriptem.

Sposoby osadzania SVG

Istnieje kilka metod osadzania SVG na stronie. Każda ma inne zastosowania i ograniczenia.

Inline SVG to najbardziej elastyczna metoda — kod SVG umieszczamy bezpośrednio w HTML:

<svg width="24" height="24" viewBox="0 0 24 24" role="img" aria-label="Ikona menu">
  <path d="M3 12h18M3 6h18M3 18h18" stroke="currentColor" stroke-width="2"/>
</svg>

Zalety inline SVG są istotne: pełna kontrola CSS (w tym currentColor dziedziczący kolor tekstu), dostępność dla technologii asystujących, brak dodatkowych żądań HTTP oraz możliwość animacji poszczególnych elementów. Wadą jest zwiększenie rozmiaru HTML i brak cache'owania — przeglądarka pobiera SVG z każdym żądaniem strony.

Tag <img> jest najprostszy w użyciu: <img src="logo.svg" alt="Logo firmy">. SVG jest cache'owane przez przeglądarkę, ale tracimy możliwość stylowania CSS i manipulacji DOM. Nie możemy zmienić koloru ikony ani animować jej części. Ta metoda sprawdza się najlepiej dla złożonych ilustracji, które nie wymagają interakcji.

CSS background-image — przydatne dla elementów dekoracyjnych, które nie niosą treści semantycznej. SVG ładowane jako tło nie są dostępne dla czytników ekranu, co jest zaletą (mniej szumu), gdy grafika jest czysto ozdobna.

SVG sprites — ikony pod kontrolą

Sprite SVG to technika łącząca wiele ikon w jeden plik, z wykorzystaniem elementu <symbol>:

<!-- sprites.svg -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-mail" viewBox="0 0 24 24">
    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
    <polyline points="22,6 12,13 2,6"/>
  </symbol>
  <symbol id="icon-phone" viewBox="0 0 24 24">
    <!-- ścieżki ikony telefonu -->
  </symbol>
</svg>

Użycie w kodzie strony jest eleganckie:

<svg class="icon" aria-hidden="true"><use href="sprites.svg#icon-mail"/></svg>

Sprite daje nam jedno żądanie HTTP zamiast dziesiątek, cache'owanie całego zestawu ikon oraz pełną kontrolę stylów CSS. W naszych szablonach Go osadzamy sprite za pomocą //go:embed, co eliminuje nawet to jedno żądanie HTTP.

Animacje SVG

SVG oferuje trzy podejścia do animacji, od najprostszego do najbardziej zaawansowanego.

CSS animations — najlepsza opcja dla prostych efektów. Obrót, zmiana skali, przesunięcie, zmiana koloru:

.spinner circle {
    animation: rotate 1.5s linear infinite;
    transform-origin: center;
}
@keyframes rotate {
    100% { transform: rotate(360deg); }
}

SMIL (Synchronized Multimedia Integration Language) to natywny system animacji SVG. Definiujemy animacje bezpośrednio w znacznikach: <animate>, <animateTransform>, <animateMotion>. SMIL nie wymaga JavaScriptu ani CSS, działa nawet w plikach SVG ładowanych przez <img>. Warto jednak wiedzieć, że wsparcie w przeglądarkach bywa nierówne.

JavaScript — dla złożonych, interaktywnych animacji. Biblioteki takie jak GreenSock (GSAP) czy anime.js oferują zaawansowane kontrolki timeline, easing i synchronizację. Używamy ich oszczędnie — tylko tam, gdzie CSS nie wystarcza.

Dostępność SVG

Dostępność grafik SVG wymaga świadomego podejścia. Kilka zasad, których się trzymamy:

  • Ikony dekoracyjne — dodajemy aria-hidden="true" i usuwamy z drzewa dostępności. Jeśli ikona towarzyszy tekstowi (np. ikona koperty obok napisu "E-mail"), czytnik ekranu nie musi jej odczytywać.

  • Ikony znaczeniowe — gdy ikona jest jedynym elementem przycisku lub linku, potrzebuje tekstu alternatywnego. Stosujemy role="img" i aria-label:

<button>
  <svg role="img" aria-label="Wyślij wiadomość" viewBox="0 0 24 24">...</svg>
</button>

  • Element <title> — wewnątrz SVG działa jak alt w <img>. Dodajemy go w złożonych grafikach informacyjnych i łączymy z aria-labelledby.

  • Element <desc> — rozszerzony opis grafiki, przydatny dla wykresów i diagramów, gdzie sam tytuł nie oddaje pełnej treści.

Optymalizacja plików SVG

Surowe pliki SVG z programów graficznych (Figma, Illustrator, Inkscape) zawierają mnóstwo zbędnych danych: metadane edytora, ukryte warstwy, nieużywane definicje, nadmiarową precyzję współrzędnych.

SVGO (SVG Optimizer) to narzędzie wiersza poleceń, które potrafi zmniejszyć rozmiar SVG nawet o 50-80%:

npx svgo input.svg -o output.svg

Najważniejsze optymalizacje to: usunięcie metadanych edytora, scalenie ścieżek, zaokrąglenie współrzędnych, usunięcie pustych grup i nieużywanych atrybutów, konwersja stylów inline na atrybuty.

Dodatkowe techniki optymalizacji:

  • Upraszczanie ścieżek — mniej punktów = mniejszy plik i szybsze renderowanie
  • Używanie viewBox zamiast width/height — jeden atrybut zastępuje dwa i umożliwia responsywność
  • Kompresja gzip/brotli — SVG jako tekst XML doskonale się kompresuje, często osiągając 70-90% redukcji rozmiaru w transmisji

Kiedy nie używać SVG

SVG nie jest uniwersalnym rozwiązaniem. Zdjęcia fotograficzne powinny pozostać w formatach rastrowych (WebP, AVIF, JPEG). Bardzo złożone ilustracje z tysiącami ścieżek mogą generować pliki SVG większe i wolniejsze w renderowaniu niż odpowiedniki w PNG. Mapy bitowe z efektami filtrów (rozmycia, cienie) też lepiej eksportować jako rastry.

Podsumowanie

SVG to potężny format, który łączy lekkość z elastycznością. Inline SVG z systemem sprite'ów daje najlepszą kontrolę nad ikonami i prostymi grafikami. Pamiętaj o dostępności — każda ikona powinna mieć określoną rolę w drzewie dostępności. Optymalizuj pliki przed wdrożeniem i stosuj kompresję na serwerze.

Potrzebujesz pomocy z implementacją systemu ikon SVG lub optymalizacją grafik na stronie? Napisz do nas — chętnie doradzimy.