Dlaczego SVG potrzebuje optymalizacji?
SVG eksportowany z Figmy, Illustratora albo Inkscape'a często waży 5-10x więcej niż musi. Dodają mnóstwo metadanych (`<metadata>`, `<title>`, narzędzie którym był rysowany), długie nazwy klas, atrybuty domyślne (`fill="black"` mimo że to wartość domyślna), współrzędne z 15 miejscami po przecinku (`d="M12.345678901234567,5.987654321"`) i komentarze edytora.
Optymalizator usuwa wszystko co niepotrzebne zachowując identyczny render. Plik 12 KB schodzi do 2 KB. Mniej do pobrania, szybsze FCP na stronie, mniej miejsca w bundle.
Tu wklejasz SVG, ustawiasz opcje (co usunąć, do ilu miejsc zaokrąglać), widzisz porównanie wizualne żeby się upewnić że nic się nie popsuło, kopiujesz albo pobierasz wynik. Wszystko w przeglądarce - plik nigdzie nie idzie.
Jak korzystać
- Wklej kod SVG w lewy panel albo kliknij "Wczytaj plik" żeby załadować z dysku.
- Po prawej zobaczysz zoptymalizowaną wersję. Pod spodem porównanie wizualne przed/po - musi wyglądać tak samo.
- Sekcja opcje: zaznacz co chcesz usunąć. Domyślnie agresywnie (najwięcej oszczędności).
- Suwak precyzja - ile miejsc po przecinku dla path. 2 wystarczy dla większości ikon, 4 dla precyzyjnej grafiki.
- Kliknij "Kopiuj" żeby skopiować wynik do schowka albo "Pobierz" żeby zapisać jako plik.
Do czego się przydaje
Typowe sytuacje gdy SVG warto poklepać:
- Ikony w aplikacji. Eksportujesz 50 ikon z Figmy, każda waży 3 KB - po optymalizacji 400 bajtów. Czyli 150 KB mniej w bundle.
- Logo na stronie głównej. Eksport z Illustratora to często 30-50 KB metadanych. Po optymalizacji 3 KB - lepsza wydajność.
- Tła SVG. Pattern w tle hero section - musi być lekki, bo blokuje rendering powyżej fold-a.
- Inline SVG w komponencie React. Im mniej kodu, tym czytelniej. Optymalizacja przed wklejeniem do komponentu.
- SVG sprite. Setki ikon w jednym pliku - każdy bajt się liczy.
- Email. SVG w mailach (gdzie wspierane) zyskuje dużo na minifikacji.
- Przygotowanie pod CSS-in-JS. Inline SVG jako string w pliku TypeScript - musi być krótki.
Następnie przekonwertuj SVG na komponent React za pomocą SVG na komponent. Dla edycji obrazów rastrowych, zobacz kompresor obrazów.