Plik SVG za duży? 8 wskazówek kompresji i optymalizacji

SVG o wadze kilkuset KB, a nawet kilku MB, to zwykle efekt zbyt wielu punktów zakotwiczenia, zbędnych ścieżek, metadanych edytora i nadmiernej precyzji dziesiętnej. Poniższe osiem technik uporządkowano od źródła po dostarczenie i wszystkie są w praktyce możliwe do zastosowania.

1. Na poziomie ścieżek: mniej punktów zakotwiczenia, łącz ścieżki

Wskazówka 1: ogranicz punkty zakotwiczenia (uprość ścieżki)

Im więcej punktów zakotwiczenia ma ścieżka, tym większy plik i wolniejsze renderowanie. Zwiększ wygładzanie podczas konwersji, aby ograniczyć je u źródła. W istniejącym SVG posłuż się funkcją Object → Path → Simplify w Illustratorze albo Path → Simplify (Ctrl+L) w Inkscape, aby usunąć zbędne punkty. Regulacja wygładzania i liczby kolorów w narzędziu konwersji PolySVG pozwala na bieżąco ważyć jakość wobec rozmiaru pliku.

Wskazówka 2: łącz ścieżki i warstwy

Połącz wiele ścieżek o tym samym wypełnieniu w jedną, aby usunąć powtarzające się atrybuty, spłaszcz bezsensowne zagnieżdżenie grup oraz usuń ukryte warstwy i puste elementy. W programie do projektowania użyj operacji scaleń ścieżek albo połącz warstwy przed eksportem.

2. Wewnątrz pliku: usuń metadane, obniż precyzję

Wskazówka 3: usuń metadane edytora

Pliki SVG wyeksportowane z Illustratorsa lub Inkscape często zawierają przestrzenie nazw edytora, <metadata>, komentarze i ustawienia eksportu, które nie wpływają na renderowanie, więc można je usunąć ręcznie albo oczyścić automatycznie za pomocą SVGO. Zachowaj jednak <title> i <desc> — pomagają w dostępności.

Wskazówka 4: obniż precyzję dziesiętną

Współrzędne ścieżek często mają sześć do ośmiu miejsc po przecinku, podczas gdy renderowanie na ekranie potrzebuje jednego lub dwóch. Ustawienie floatPrecision na 1 lub 2 w konfiguracji SVGO wyraźnie zmniejsza plik bez zauważalnej różnicy. Przy bardzo małych ikonach nie ściskaj współrzędnych zbyt mocno, bo kształt się zniekształci.

3. Automatyzacja: jedno polecenie z SVGO

Wskazówka 5: optymalizuj automatycznie za pomocą SVGO

SVGO to de facto standardowe narzędzie do optymalizacji SVG, dostępne z dziesiątkami wtyczek: usuwanie komentarzy i metadanych, łączenie ścieżek, optymalizacja poleceń ścieżek i porządkowanie liczb. Podstawowe użycie:

npx svgo input.svg -o output.svg

Typowe pliki kurczą się o 30%–70%. Dwa zastrzeżenia: nie usuwaj atrybutu viewBox, bo skalowanie się zepsuje; przy ikonach, które mają być przekolorowywane przez CSS, zachowaj dziedziczone wypełnienie zamiast na stałe wpisywać kolor.

Porównaj rozmiar pliku i faktyczny rozmiar przesyłany w narzędziach deweloperskich przeglądarki przed optymalizacją i po niej, aby potwierdzić zysk. Zmieniaj tylko jeden rodzaj parametru za razem, dzięki czemu łatwo wskazać krok, który wprowadził problem.

4. Struktura i ponowne użycie: symbole i warstwy kolorów

Wskazówka 6: powtarzaj kształty przez defs i use

Gdy ta sama ikona pojawia się na stronie kilka razy, zdefiniuj ją raz przez <defs> i odwołuj się przez <use> albo zbuduj arkusz SVG — rozmiar pliku i liczba żądań spadną razem.

Wskazówka 7: kontroluj warstwy kolorów i unikaj osadzonych bitmap

Obniż liczbę kolorów podczas wektoryzacji, aby ograniczyć liczbę warstw, i tam, gdzie to możliwe, używaj jednolitego koloru zamiast złożonego gradientu. Przede wszystkim unikaj osadzania bitmap zakodowanych w base64 wewnątrz SVG — to zamienia plik wektorowy w nośnik rastrowy, a rozmiar wymyka się spod kontroli. Pozostałości ścieżek po konwersji można w edytorze online usunąć kliknięciem.

5. Dostarczenie: kompresja transportowa i buforowanie

Wskazówka 8: włącz gzip/Brotli i cache

SVG to tekst, więc włączenie gzip lub Brotli na serwerze zwykle obcina przesyłany rozmiar o kolejne 60%–80%; nadaj statycznym plikom SVG długie nagłówki cache. Bardzo małe ikony można osadzić wprost w HTML, co całkowicie oszczędza żądanie. Zasady stojące za tym opisuje Zalety SVG; aby kontrolować rozmiar już na etapie konwersji, przeczytaj Sposoby konwersji obrazu do SVG.

Kolejność ma znaczenie: kontroluj punkty zakotwiczenia i warstwy kolorów u źródła, czyść metadane i precyzję wewnątrz pliku, następnie uruchom SVGO, a na końcu włącz kompresję transportową. Gdy wszystkie cztery warstwy działają, pliki SVG zwykle kurczą się o rząd wielkości.