Jeśli kiedykolwiek powiększyłeś logo i zobaczyłeś rozmytą, poszarpaną plamę, wiesz, jak irytujący jest ten problem. SVG powstał właśnie po to, żeby go rozwiązać. Ten format działa zupełnie inaczej niż JPG i PNG, a zrozumienie tej różnicy jest kluczem do wybierania właściwego formatu w każdej sytuacji.
Co oznacza skrót SVG?
SVG to skrót od Scalable Vector Graphics , czyli „skalowalna grafika wektorowa”. To otwarty format obrazu, ustandaryzowany przez W3C (to samo konsorcjum, które odpowiada za specyfikacje HTML i CSS) i obsługiwany natywnie przez wszystkie nowoczesne przeglądarki.
JPG i PNG zapisują obraz jako siatkę kolorowych pikseli. SVG robi coś innego: opisuje obraz tekstem, używając współrzędnych matematycznych do zapisania kształtów, linii, krzywych i kolorów. Plik SVG jest więc w praktyce plikiem tekstowym, który można otworzyć i edytować w dowolnym edytorze kodu.
Jak SVG działa od środka?
Plik SVG jest zapisany w XML-u, języku znaczników podobnym do HTML-a. Czerwone koło wygląda w nim na przykład tak:
Przeglądarka czyta te instrukcje matematyczne i rysuje obraz bezpośrednio na ekranie, wyliczając piksele na bieżąco. Dlatego SVG można wyświetlić w każdym rozmiarze — od favikony 16 × 16 pikseli po dziesięciometrowy billboard — bez żadnej utraty jakości.
Jakie są zalety SVG?
- Skalowanie bez utraty jakości: powiększaj i zmniejszaj do woli — obraz pozostaje ostry w każdej rozdzielczości, także na ekranach Retina i 4K.
- Lekkie pliki: proste logo i ikony w SVG bywają dużo mniejsze niż w PNG, zwłaszcza w dużych rozmiarach.
- Edycja z poziomu kodu: kolory, rozmiary i animacje zmienisz bezpośrednio w CSS lub JavaScripcie, bez otwierania edytora graficznego.
- Widoczność w wyszukiwarkach: ponieważ treść jest tekstem, Google potrafi odczytać i zaindeksować tekst zapisany w SVG.
- Obsługa animacji: animacje CSS i SMIL tworzy się wprost w SVG, bez sięgania po GIF-y czy wideo.
- Dostępność: do SVG można dodać tytuły i opisy czytane przez czytniki ekranu.
Jakie są ograniczenia SVG?
- Nie nadaje się do zdjęć: fotografia to miliony odcieni i złożone gradienty. Zapisanie tego wektorami dałoby ogromne i nieefektywne pliki — do zdjęć zawsze lepszy będzie JPG.
- Złożone grafiki robią się ciężkie: bardzo szczegółowe ilustracje z setkami kształtów i gradientów potrafią dać duże pliki SVG, które wolno się renderują.
- Ręczna edycja wymaga wprawy: edytowanie SVG w kodzie wymaga znajomości XML-a i matematyki wektorowej. Narzędzia takie jak Illustrator czy Figma mocno to upraszczają.
💡 Zasada w praktyce: używaj SVG do logo, ikon, ilustracji, wykresów, map i każdej grafiki, która ma się wyświetlać w wielu rozmiarach. Do zdjęć oraz obrazów pełnych detali i złożonych gradientów wybieraj JPG lub WebP.
SVG, PNG czy JPG — kiedy używać którego?
| Cecha | SVG | PNG | JPG |
|---|---|---|---|
| Typ | Wektorowy | Rastrowy (piksele) | Rastrowy (piksele) |
| Skalowanie bez strat | Tak | Nie | Nie |
| Przezroczystość | Tak | Tak | Nie |
| Idealny do zdjęć | Nie | Nie | Tak |
| Idealny do logo i ikon | Tak | Tak | Nie |
| Edycja przez CSS/JS | Tak | Nie | Nie |
| Obsługa w przeglądarkach | Tak | Tak | Tak |
Jak używać SVG na stronach i w aplikacjach
Są trzy główne sposoby na umieszczenie SVG na stronie:
- Jako znacznik
: najprostsze rozwiązanie. SVG zachowuje się jak każdy inny obrazek, ale nie da się nim sterować z poziomu CSS ani JavaScriptu.
- Bezpośrednio w HTML-u: kod SVG wkleja się wprost do strony. Daje pełną kontrolę przez CSS i JS — kolory, animacje, interakcje. To najlepsze podejście do interaktywnych ikon.
- Jako tło w CSS: przez
background-image: url('icone.svg'). Przydatne przy ikonach dekoracyjnych, ale dostęp z JavaScriptu jest ograniczony.
Jak przekonwertować obrazy do SVG?
Zamiana zdjęcia lub pliku PNG na SVG jest możliwa dzięki procesowi zwanemu wektoryzacją. Zamienia on piksele w kształty geometryczne. Najlepiej wychodzi przy prostych grafikach o kilku kolorach i wyraźnych krawędziach — takich jak logo na białym tle. Konwerter obrazów pozwala zamieniać pliki między najpopularniejszymi formatami, w tym PNG i JPG na formaty przyjazne dla stron WWW.
Przekonwertuj swoje obrazy
Zamieniaj pliki między najpopularniejszymi formatami obrazów szybko i za darmo, bezpośrednio w przeglądarce.
Konwertuj obrazCzy SVG jest dobry dla SEO?
Tak. Ponieważ SVG opiera się na tekście, Google potrafi przeszukać i zaindeksować jego zawartość. Do tego logo i ikony w SVG są zwykle lżejsze niż w PNG, co przyspiesza stronę — a szybkość jest bezpośrednim czynnikiem rankingowym od czasu wprowadzenia Core Web Vitals.
Aby zoptymalizować SVG pod SEO, dodaj w jego kodzie znaczniki title e desc , które działają jak tekst alternatywny dla czytników ekranu i wyszukiwarek.