6 zalet grafiki wektorowej SVG

Zaleta 1: nieskończone skalowanie bez zniekształceń

SVG opisuje kształty ścieżkami matematycznymi, a przy powiększeniu przeglądarka po prostu rysuje go ponownie w nowym rozmiarze. Ikony pozostają ostre na ekranach Retina, a logo przeskalowane do rozmiaru billboardu wciąż jest wyraźne — nie trzeba przygotowywać kilku rozdzielczości, jak w przypadku bitmapy. To podstawowa zaleta grafiki wektorowej i powód, dla którego logotypy oraz ikony trzeba wektoryzować. W przypadku stron responsywnych jedna ikona SVG obsługuje każdy scenariusz, od telefonu po ekran 4K, więc nie trzeba przygotowywać osobnych obrazów dla każdego urządzenia.

Zaleta 2: małe pliki i szybkie ładowanie stron

SVG prostego ikony to często zaledwie kilka KB — znacznie mniej niż zestaw PNG w kilku rozdzielczościach. Ponadto, ponieważ SVG jest tekstem, kompresuje się wyjątkowo dobrze gzipem lub Brotli, co obcina przesyłany rozmiar o kolejne sześćdziesiąt do osiemdziesięciu procent. Na stronie gęsto wypełnionej ikonami przejście na SVG wyraźnie zmniejsza zużycie transferu. Złożone ilustracje wymagają natomiast kontroli liczby ścieżek — szczegóły znajdziesz w wskazówkach optymalizacji SVG. Po przejściu systemu ikon na SVG łączna liczba bajtów pobieranych dla obrazów nad foldem często spada o ponad połowę, co ma szczególne znaczenie przy wolnych łączach.

Zaleta 3: programowalność, interaktywność i animowalność

SVG jest częścią DOM: możesz zmienić wypełnienie ikony przez CSS, sterować animacją rysowania kreski w JavaScripcie i reagować na kliknięcia oraz najechanie kursorem. Zmiana kolorów ikon w trybie ciemnym, podświetlenie fragmentu wykresu po najechaniu czy animacje ładowania — wszystko da się zrobić bezpośrednio w SVG, bez podmiany obrazka i bez animacji klatka po klatce. Formaty rastrowe po prostu tego nie potrafią. Najwięcej zyskuje wizualizacja danych: każdy słupek i każdy odcinek wykresu to niezależna ścieżka, więc podświetlenie po najechaniu i zdarzenia drill-down można dołączyć bezpośrednio.

Zaleta 4: edytowalny tekst, przyjazne SEO i dostępności

Tekst wewnątrz SVG to prawdziwy tekst — można go zaznaczyć, przeszukać i przetłumaczyć. Dodaj do grafiki opisy <title> i <desc>, a czytniki ekranowe będą ją ogłaszać, a wyszukiwarki zrozumieją znaczenie ilustracji. Tekst w bitmapie to tylko piksele — niewidoczny zarówno dla wyszukiwarek, jak i dla użytkowników czytników ekranowych. Witryny wielojęzyczne mogą też tłumaczyć tekst wewnątrz SVG bez ponownego eksportu obrazu.

Zaleta 5: jeden plik źródłowy wykorzystywany wszędzie

Ten sam SVG działa na stronie internetowej, można go wyeksportować jako PNG o wysokiej rozdzielczości do dokumentu i przekazać urządzeniom drukującym oraz grawerującym. Gdy zmienia się kolor marki, edytujesz jeden plik źródłowy, a każde zastosowanie aktualizuje się naraz, zamiast przebudowywać każdy rozmiar osobno. Dla zespołu oznacza to znacznie niższy koszt utrzymania zasobów. Szczególnie korzystają sklepy internetowe i zespoły marki: jedna wektoryzacja pozwala każdej stronie produktowej, opakowaniu i materiałowi na wydarzenie korzystać z tej samej grafiki, a zmiana koloru to pilnowanie jednego pliku źródłowego.

Zaleta 6: otwarty standard z dojrzałym ekosystemem

SVG to otwarty standard W3C wspierany natywnie przez każdą nowoczesną przeglądarkę, czytelny i zapisywalny przez narzędzia takie jak Illustrator, Figma i Inkscape, bez uzależnienia od jednego dostawcy. Obiektywnie SVG ma też ograniczenia: nie nadaje się do obrazów fotograficznych, wydajność renderowania spada przy nadmiernie złożonych ścieżkach, a zdjęcia powinny pozostać w JPG lub WEBP. Wokół SVG powstał też dojrzały ekosystem open source — SVGO do kompresji, biblioteki ikon i biblioteki animacji — wszystko gotowe do użycia.

Dopiero zaczynasz przygodę z SVG? Skorzystaj z narzędzia Obraz na SVG, aby zamienić posiadane bitmapy w wektory, albo przeglądaj i pobieraj darmowe zasoby wektorowe w galerii PolySVG. Na początek przeczytaj Czym jest SVG oraz Różnica między PNG a SVG.