Kompresuj pliki SVG

SVG to kod, a nie piksele

Plik SVG (Scalable Vector Graphics) to dokument tekstowy w XML opisujący kształty: ścieżki, okręgi, gradienty, tekst. Ponieważ zawiera instrukcje zamiast pikseli, pozostaje ostry w każdym rozmiarze – od 16-pikselowej ikony karty (favicon) po billboard. Ikony, logo, ilustracje, wykresy i mapy w internecie to często SVG, a format jest standardem W3C od 2001 roku.

To, że jest tekstem, ma skutek uboczny: rozmiar pliku zależy od tego, jak rozwlekle zapisał go edytor, a nie od tego, jak duży jest wyświetlany obraz. Dwa pliki SVG, które wyglądają identycznie, mogą różnić się rozmiarem kilkukrotnie.

Co sprawia, że pliki SVG są cięższe, niż muszą

• Metadane edytora. Illustrator, Inkscape, Figma i Sketch dodają własne przestrzenie nazw, nazwy warstw, komentarze eksportu, a czasem osadzoną kopię edytowalnego dokumentu.
• Nadmierna precyzja. Współrzędne takie jak 12.483920174, choć 12.48 wygląda dokładnie tak samo w każdym realnym rozmiarze.
• Zbędna struktura. Puste grupy, ukryte warstwy, domyślne wartości atrybutów, nieużywane definicje i style, które mogłyby być krótsze.
• Długa składnia ścieżek. Polecenia bezwzględne tam, gdzie względne są krótsze, powtarzane litery poleceń, zbędne spacje.
• Osadzone bitmapy. Zdjęcie wklejone do ilustracji jest zapisane jako tekst Base64 wewnątrz SVG, co zajmuje o ok. jedną trzecią więcej niż oryginalny plik obrazu.

Jak narzędzie optymalizuje SVG

Narzędzie uruchamia w twojej przeglądarce SVGO – popularny otwartoźródłowy optymalizator SVG. Usuwa metadane i komentarze, scala niepotrzebne grupy, skraca dane ścieżek, zaokrągla liczby domyślnie do 3 miejsc po przecinku (możesz wybrać od 0 do 6) i łączy style, powtarzając przebiegi, aż nic się już nie zmienia. Wynik to wciąż zwykły plik SVG, który otworzysz w dowolnym edytorze lub wkleisz do HTML. W naszych testach na ośmiu plikach SVG, od ręcznie zoptymalizowanych ikon po eksport z Inkscape pełen danych edytora, oszczędności wyniosły od 8% do 42%.

Optymalizacja jest technicznie stratna w wąskim sensie: zaokrąglanie zmienia współrzędne o drobne wartości, a dane specyficzne dla edytora znikają, więc nie otworzysz już pliku ze wszystkimi oryginalnymi warstwami. Zachowaj plik źródłowy z programu graficznego, a zoptymalizowany SVG traktuj jako wersję do publikacji.

Serwery zwykle wysyłają SVG z kompresją gzip lub Brotli, która w drodze do przeglądarki ponownie zmniejsza tekst. Optymalizacja i kompresja na serwerze sumują się, bo usuniętych danych w ogóle nie trzeba kompresować.

Kiedy zoptymalizowany SVG przestaje działać

• CSS lub JavaScript nie znajduje już elementu. Optymalizatory skracają lub usuwają identyfikatory i nazwy klas, które w samym pliku wyglądają na nieużywane. Jeśli style lub skrypty twojej strony się do nich odwołują, sprawdź wynik przed publikacją.
• Ikona przestała się skalować. SVG potrzebuje atrybutu viewBox, żeby prawidłowo zmieniać rozmiar. Narzędzie go zachowuje, więc sprawdź, czy oryginał go miał; SVG z samą stałą szerokością i wysokością nigdy dobrze się nie skalował.
• Drobne kształty wyglądają na zniekształcone. Bardzo małe ikony narysowane na dużym płótnie mogą ucierpieć przez zaokrąglanie. Przy domyślnej precyzji zdarza się to rzadko.
• Plik to głównie osadzone zdjęcie. Wyeksportuj zdjęcie jako osobny plik JPG lub WebP i podlinkuj je albo przekonwertuj całą grafikę na bitmapę.

Pytania o SVG

Powiązane strony

Obrazami bitmapowymi zajmuje się kompresor obrazów. Co działa lokalnie i dlaczego – przeczytasz na stronie Jak to działa.