Jak kompresować pliki SVG.

Otwórz kompresor SVG i wybierz plik SVG lub wypróbuj próbkę. Próbka to svg-compressor.svg, 985-bajtowy znak orbity z viewBox 512 × 512, wypełnieniem gradientowym, tytułem i opisem. Użyj Wklej SVG, gdy kod znajduje się już w edytorze lub schowku.

Narzędzie akceptuje do 20 plików o rozmiarze 2 MB każdy. Analizuje kompletny dokument SVG i usuwa standardowe deklaracje dokumentu SVG bez ładowania plików zewnętrznych. Wadliwy kod XML, niestandardowe deklaracje encji i wewnętrzne podzbiory dokumentów są odrzucane. Bardzo złożone pliki mogą również osiągnąć limit elementów lub czasu przetwarzania.

Ten proces tworzy statyczną grafikę wektorową. Skrypty, programy obsługi zdarzeń, zasoby zewnętrzne, animacje i osadzone obrazy rastrowe są usuwane. Podgląd oryginału jest już oczyszczony, więc nie należy go interpretować jako nieograniczonego renderowania każdej funkcji w pliku źródłowym.

Dwa panele podglądu pokazują oczyszczony oryginał i zoptymalizowany wynik. Rozmiary obok Oryginału i Zoptymalizowanego oraz podsumowanie bajtów porównują plik źródłowy z gotowym wynikiem. Raportuje wzrost, gdy optymalizacja sprawia, że dany plik jest większy, zamiast obiecywać redukcję za każdym razem.

Otwórz Ustawienia i ustaw Precyzję dziesiętną na 2 dla przykładu. Precyzja waha się od 1 do 5 i zaczyna się od 3. Niższe wartości mogą uprościć geometrię numeryczną, ale mogą przesuwać drobne krzywe, małe szczeliny lub wyrównane krawędzie. Zwiększ ją, gdy podgląd traci istotne szczegóły.

Ta próbka wykorzystuje prostą geometrię, więc precyzja 2 zachowuje swój rozpoznawalny kształt. Inne pliki SVG ze złożonymi współrzędnymi dziesiętnymi mogą zmienić się bardziej. Wyświetl zoptymalizowany kod SVG, aby zobaczyć rzeczywisty tekst, który zostanie pobrany; nie jest to oddzielna reprezentacja oryginału.

Pozostaw włączoną opcję Zachowaj dostępne tytuły i opisy dla przykładu. Zachowuje to tytuł i opis SVG, usuwając jednocześnie zbędne metadane edytora i upraszczając kwalifikujący się kod. Są to różne rodzaje informacji i nie należy ich traktować jako zamiennych.

Skracanie wewnętrznych identyfikatorów jest domyślnie włączone. Optymalizator aktualizuje odniesienia wewnątrz SVG, ale zewnętrzne CSS lub JavaScript mogą nadal polegać na oryginalnych identyfikatorach. Wyłącz tę opcję, gdy plik jest częścią większej aplikacji, która nazywa swoje elementy, i przetestuj gotowy SVG w tym kontekście.

Pozostaw wyłączone opcje Wymiary responsywne i Czytelny kod wyjściowy dla przykładu. Wymiary responsywne usuwają stałą szerokość i wysokość, gdy współrzędne viewBox mogą zapewnić skalowalne rozmiary. Czytelny kod wyjściowy dodaje wcięcia i jest przydatny do konserwacji, ale może zwiększyć rozmiar tekstu.

Wybierz Start, a następnie Pobierz. Gotowy wynik ma 635 bajtów w porównaniu ze źródłem 985-bajtowym: redukcja o 35.5%. Jego tytuł i opis pozostają, a wyświetlane porównanie jest renderowane z oryginalnego źródła i pobranego SVG.

Artykuł renderuje oba wektory w 1,024 pikselach dla wyraźnej ilustracji wyniku; ich logiczny rozmiar współrzędnych pozostaje 512 × 512. Większy podgląd nie dodaje zawartości rastrowej do zapisanego SVG. Sprawdź rzeczywisty wektor na stronie docelowej przed zastąpieniem istniejącego zasobu produkcyjnego.

Jeden plik pobiera się jako SVG z oryginalną nazwą podstawową. Partia pobiera się jako jeden plik ZIP z numerowanymi przyrostkami dla zduplikowanych nazw plików. Przetwarzanie odbywa się w przeglądarce. Zachowaj oryginalne źródło, jeśli chcesz później wypróbować inne ustawienia optymalizacji.