SVG Optimizer — Optymalizator SVG

Dlaczego warto optymalizować pliki SVG

Pliki SVG wyeksportowane z narzędzi graficznych, takich jak Illustrator, Figma, Sketch czy Inkscape, zawierają znacznie więcej niż widoczne kształty. Metadane edytora, komentarze XML, ukryte warstwy, domyślne wartości atrybutów, nieużywane definicje, nadmiar miejsc po przecinku i zbędne grupy mogą z łatwością stanowić połowę pliku. To narzędzie uruchamia SVGO — ten sam optymalizator, z którego korzysta większość procesów budowania i bibliotek ikon — aby usunąć ten balast. Mniejsze pliki SVG ładują się szybciej, odchudzają ikony osadzone w HTML i pomagają utrzymać porządek w repozytoriach.

Domyślny preset stosuje dziesiątki bezpiecznych przekształceń: usuwa deklarację XML, komentarze, metadane i przestrzenie nazw edytorów, porządkuje identyfikatory, skraca zapis kolorów, scala ścieżki, zamienia podstawowe kształty na zwarte ścieżki, gdy tak jest krócej, i przepisuje dane ścieżek przy użyciu poleceń względnych i mniejszej liczby cyfr. Multipass powtarza proces, dopóki nie da się uzyskać dalszych oszczędności, co często pozwala urwać jeszcze kilka procent.

Jak dobrać opcje

Precision (precyzja) określa, ile miejsc po przecinku zostaje w liczbach; 2–3 wystarczą dla ikon, a szczegółowe ilustracje lub mapy mogą wymagać więcej. Remove <title> oszczędza bajty, ale usuwa dostępną nazwę, więc zachowaj ją w grafikach niosących treść. Remove viewBox zwykle powinna pozostać wyłączona, bo to właśnie viewBox pozwala SVG skalować się responsywnie. Remove width/height przydaje się, gdy rozmiar jest kontrolowany przez CSS. Remove scripts & event handlers usuwa elementy <script>, atrybuty on* i linki javascript: — to dobry nawyk przy plikach SVG z nieznanych źródeł. Pretty print dodaje wcięcia dla lepszej czytelności kosztem kilku bajtów.

Prywatne, lokalne i bezpieczne podglądy

Całe przetwarzanie odbywa się w przeglądarce; pliki nie są nigdzie przesyłane. Oba podglądy są wyświetlane za pomocą elementu obrazu, który wczytuje lokalny adres URL typu blob, a przeglądarki nigdy nie wykonują skryptów w plikach SVG wyświetlanych w ten sposób. Zawsze porównaj oba podglądy przed użyciem wyniku: zbyt agresywna precyzja lub usunięcie viewBox mogą zmienić sposób renderowania grafiki. Plakietki z rozmiarem pokazują zaoszczędzone bajty, dzięki czemu możesz wyważyć rozmiar pliku i wierność obrazu.