Narzędzie wczytuje oficjalny silnik SVGO dla przeglądarki dopiero po kliknięciu przycisku optymalizacji. Korzysta ze standardowego zestawu wtyczek oraz usuwa skrypty i procedury obsługi zdarzeń, aby plik był bezpieczniejszy w zwykłym użyciu internetowym. Można zachować ID, jeśli zależą od nich CSS, JavaScript, gradienty, maski lub odwołania zewnętrzne.
Darmowa optymalizacja SVG
Działa w całości w przeglądarce - bez wysyłania plików i bez rejestracji.
Skrypty i procedury obsługi zdarzeń są usuwane
Wejściowy SVG
Zoptymalizowany SVG
Ctrl lub Command + Enter
Wklej kod SVG lub wybierz plik, aby rozpocząć
Na czym polega optymalizacja SVG?
Optymalizacja SVG zmniejsza plik wektorowy przez usunięcie metadanych edytora, komentarzy, zbędnych atrybutów i niepotrzebnej precyzji liczb. Wklej kod lub wybierz plik, aby uruchomić SVGO bezpośrednio w przeglądarce. Porównaj podgląd oryginału i wyniku, a następnie skopiuj lub pobierz mniejszy SVG bez wysyłania swojej pracy na serwer.
Jak korzystać
- 1Dodaj SVG. Wklej pełny kod SVG, przeciągnij lokalny plik .svg do pola przesyłania albo otwórz gotowy przykład.
- 2Wybierz bezpieczne ustawienia. Ustaw precyzję liczb, pozostaw włączoną optymalizację wieloprzebiegową dla dodatkowych oszczędności i zachowaj ID, do których odwołuje się inny kod.
- 3Zoptymalizuj i porównaj. Uruchom SVGO, a potem sprawdź liczbę bajtów przed i po zmianie oraz oba podglądy.
- 4Skopiuj lub pobierz. Skopiuj skrócony kod albo pobierz nowy plik .optimized.svg, pozostawiając oryginalną pracę bez zmian.
Dla kogo
- Programiści frontend zmniejszający ikony, logo i ilustracje przed dodaniem ich do strony lub biblioteki komponentów.
- Projektanci usuwający metadane i kod właściwy dla edytora z plików eksportowanych z Figma, Illustrator, Sketch lub Inkscape.
- Zespoły dbające o wydajność mierzące dokładną oszczędność bajtów UTF-8 przed dodaniem zasobów wektorowych do pakietu strony.
- Autorzy komponentów przygotowujący zwięzły kod SVG osadzany bezpośrednio w React, Vue, Svelte lub zwykłym HTML.
Najczęstsze pytania
Czy optymalizacja SVG jest darmowa?
Tak. Pliki SVG można optymalizować bez konta, opłat i instalowania programu. Narzędzie pokazuje dokładną zmianę liczby bajtów UTF-8, a wynik można od razu skopiować lub pobrać z przeglądarki.
Czy mój plik SVG trafia na serwer?
Nie. Odczyt pliku, działanie SVGO, pomiar bajtów i tworzenie podglądu odbywają się lokalnie w przeglądarce. Logo, ikony i nieopublikowane projekty nie są przesyłane przez to narzędzie.
Jak duży plik SVG można zoptymalizować?
Narzędzie przyjmuje kod SVG o rozmiarze do 5 MB. Ten limit pozwala zachować sprawne parsowanie na telefonach i typowych laptopach. Przy bardzo dużych ilustracjach warto usunąć osadzone obrazy rastrowe lub podzielić pracę na mniejsze zasoby.
Czy optymalizacja SVG zmieni wygląd obrazu?
SVGO ma zachować sposób renderowania przy usuwaniu zbędnych danych. Mocne zaokrąglanie liczb lub czyszczenie ID może jednak wpłynąć na złożone pliki. Porównaj oba podglądy i przetestuj zoptymalizowany SVG w docelowym miejscu przed zastąpieniem pliku produkcyjnego.
Co zmienia precyzja dziesiętna?
Precyzja dziesiętna określa, ile cyfr po przecinku SVGO zachowuje we współrzędnych, przekształceniach i powiązanych wartościach. Niższa wartość często daje mniejszy plik, ale może widocznie przesunąć detale w bardzo dokładnych lub wyjątkowo dużych projektach. Trzy cyfry to praktyczne ustawienie początkowe dla większości ikon i ilustracji internetowych.
Czy zachować ID w pliku SVG?
Zachowaj ID, gdy odwołują się do nich CSS, JavaScript, atrybuty aria, gradienty, maski, filtry lub dokumenty zewnętrzne. W samodzielnej grafice dekoracyjnej można wyłączyć tę opcję, aby SVGO usunął lub skrócił nieużywane identyfikatory.
Czy optymalizator usuwa skrypty z SVG?
Tak. Proces usuwa elementy script, atrybuty procedur obsługi zdarzeń i łącza JavaScript. Dzięki temu plik jest bezpieczniejszy jako zwykły obraz internetowy, ale narzędzie nie nadaje się do aplikacji SVG, których działanie zależy od skryptów.
Jak działa optymalizacja wieloprzebiegowa?
SVGO ponownie przetwarza wynik, dopóki każdy przebieg zmniejsza plik. Niektóre przekształcenia odsłaniają kolejne miejsca do wyczyszczenia, więc można zyskać jeszcze trochę miejsca. Większość oszczędności zwykle pochodzi z pierwszego przebiegu.