Optymalizator SVG
-
Original Size
-
Optimized Size
-
Savings
Dlaczego optymalizować pliki SVG?
Pliki SVG eksportowane z Illustratora, Figmy lub Inkscape zawierają wiele niepotrzebnych danych — komentarze, metadane edytora, redundantne atrybuty, zbyt precyzyjne liczby dziesiętne i puste kontenery. Elementy te zwiększają rozmiar pliku o 30-70% bez żadnych korzyści wizualnych. Zoptymalizowane SVG ładują się szybciej, zużywają mniej przepustowości i mogą być bardziej czysto osadzane w HTML.
8 strategii optymalizacji
Włączaj/wyłączaj każdą operację optymalizacji niezależnie dla precyzyjnej kontroli nad tym, co jest usuwane
Statystyki redukcji rozmiaru
Zobacz oryginalny rozmiar, zoptymalizowany rozmiar i procent oszczędności po każdej optymalizacji
Optymalizacja bez utraty wizualnej
Wszystkie optymalizacje zachowują wygląd wizualny SVG — usuwane są tylko niewidoczne metadane
Jak optymalizować SVG w 3 krokach
Wklej kod SVG
Skopiuj kod źródłowy SVG z narzędzia do projektowania lub pliku i wklej go w polu wejściowym
Wybierz optymalizacje
Zaznacz opcje optymalizacji do zastosowania — lub użyj wartości domyślnych dla maksymalnej redukcji
Skopiuj i wdróż
Skopiuj zoptymalizowany SVG i zastąp oryginalny plik, lub osadź go bezpośrednio w HTML
Przypadki użycia optymalizacji SVG
Biblioteki ikon
Optymalizuj zestawy ikon eksportowane z Figmy lub Illustratora przed ich pakowaniem w bibliotekę
Logotypy
Oczyść eksportowane logotypy SVG dla nagłówków stron, faviconów i zasobów marki
Animowane SVG
Zmniejsz rozmiar bazowy animowanych SVG, które są już większe ze względu na dane animacji
PWA i urządzenia mobilne
Mniejsze SVG zmniejszają zużycie danych mobilnych i poprawiają wyniki wydajnościowe Lighthouse
Najlepsze praktyki optymalizacji SVG
✓ Uważaj na usuwanie ID w animacjach CSS
Jeśli SVG używa animacji CSS lub JavaScript wybierających ID elementów, odznacz 'Usuń ID', aby nie zepsuć animacji.
✓ Zachowaj viewBox, usuń szerokość/wysokość
Usunięcie atrybutów szerokości/wysokości i zachowanie viewBox sprawia, że SVG są responsywne przez CSS — najlepsze podejście dla responsywnego projektowania.
✓ Zaokrąglaj liczby do 2 miejsc dziesiętnych
Współrzędne ścieżek z 5+ miejscami dziesiętnymi są niepostrzegalnie wizualnie. Zaokrąglanie do 2 miejsc zmniejsza rozmiar pliku bez żadnej wizualnej różnicy.
✓ Automatyzuj z SVGO w CI/CD
W dużych projektach integruj SVGO w potoku budowania, aby automatycznie optymalizować wszystkie SVG. Używaj tego narzędzia do szybkich ręcznych sprawdzeń.
❓ Często zadawane pytania
O ile optymalizacja SVG może zmniejszyć rozmian?
Zazwyczaj od 30-70% w zależności od źródła. SVG z Illustratora często oferują największe oszczędności. Eksporty Figmy są już stosunkowo czyste. Największe zyski pochodzą z usuwania metadanych edytora, komentarzy i zaokrąglania precyzji dziesiętnej.
Czy optymalizacja zmienia wygląd SVG?
Nie — wszystkie optymalizacje tego narzędzia usuwają jedynie niewidoczne dane (komentarze, metadane, redundantne atrybuty) lub zaokrąglają liczby do niezauważalnej precyzji. Efekt wizualny jest identyczny z oryginałem.
Dlaczego usuwać atrybuty szerokości i wysokości?
Zakodowane wartości szerokości/wysokości uniemożliwiają responsywne skalowanie SVG przez CSS. Usuwając je i zachowując tylko viewBox, możesz w pełni kontrolować wymiary SVG przez właściwości CSS.
Jaka jest różnica między tym narzędziem a SVGO?
SVGO to narzędzie wiersza poleceń Node.js i standard optymalizacji SVG. To narzędzie oferuje wygodny interfejs przeglądarkowy dla najczęstszych optymalizacji bez konieczności instalowania Node.js.