Optymalizator SVG
Wyczyść kod wektorowy, zanim trafi do komponentu, zestawu ikon albo paczki zasobów statycznych.
Ustawienia optymalizacji
Niższa precyzja może bardziej zmniejszyć plik, ale agresywne zaokrąglenie potrafi zniekształcić ścieżki. Wartość 2 albo 3 jest dobrym domyślnym wyborem.
Jak działa optymalizacja SVG
Usuń dane niewpływające na renderowanie
Eksporty z narzędzi projektowych często zawierają metadane, komentarze, przestrzenie nazw edytora i niewidoczny kod, który dodaje bajty bez zmiany obrazu.
Zmniejsz precyzję ścieżek
Współrzędne takie jak 10.5432109 często można zaokrąglić do 10.54 bez widocznej różnicy, zwłaszcza przy ikonach renderowanych w małych rozmiarach.
Sprawdź przed publikacją
Optymalizacja powinna zachować `viewBox`, wypełnienia, obrysy, etykiety ARIA i ważne ID, gdy wpływają na renderowanie, stylowanie, animację albo dostępność.
Częste pytania
Czy zoptymalizowany SVG będzie rozmyty?
Nie. SVG jest wektorowy, więc optymalizacja przycina kod zamiast rasteryzować obraz. Ryzykiem jest jedynie zbyt agresywne zaokrąglenie wartości ścieżek.
Dlaczego zoptymalizowany SVG czasem jest większy?
Jeśli oryginał był już mocno skompresowany albo ręcznie zoptymalizowany, może nie być wiele do usunięcia. Wtedy wynik bywa podobny rozmiarowo albo czasem minimalnie większy.
Czy to obsługuje optymalizację wielu plików?
Ta strona służy do inspekcji i strojenia pojedynczego pliku. Przy optymalizacji masowej użyj narzędzia w kroku buildowania, takiego jak SVGO.
Czy optymalizacja SVG może zepsuć animacje albo stylowanie?
Tak, jeśli optymalizator usunie ID, klasy, metadane albo precyzję, na których polega CSS albo JavaScript. Podejrzyj wynik i zachowaj ważne atrybuty, gdy SVG jest interaktywny.
Czy dekoracyjne SVG powinny mieć etykiety dostępności?
Dekoracyjne SVG zwykle można ukryć przed technologiami asystującymi. Ikony i ilustracje niosące informację powinny zachować sensowne tytuły, etykiety albo tekst w otoczeniu.