Optymalizator i minifikator SVG za darmo

Jak to działa

To narzędzie zmniejsza rozmiar plików SVG za pomocą ręcznie napisanego optymalizatora działającego w całości w przeglądarce — bez bibliotek i serwera. Łączy dwa przebiegi: wbudowane w przeglądarkę DOMParser/XMLSerializer do precyzyjnej pracy na atrybutach oraz ukierunkowane podstawienia wyrażeń regularnych do usuwania komentarzy, metadanych i zwijania białych znaków.

1. 1
   DOMParser oczyszcza SVG

   Przed optymalizacją DOMParser przeglądarki odczytuje SVG jako XML i przechodzi przez każdy element. Znaczniki script, obsługi zdarzeń (dowolny atrybut on*), elementy animacji i odwołania do zewnętrznych adresów URL są usuwane bezwarunkowo — niezależnie od wybranych opcji optymalizacji.
2. 2
   Zaokrąglanie liczb dziesiętnych na poziomie DOM

   Jeśli zaokrąglanie jest włączone, optymalizator przechodzi przez sparsowany DOM drugi raz i zaokrągla tylko znane atrybuty liczbowe (dane d ścieżek, współrzędne, wartości transform, grubości obrysu itd.), używając wyrażenia regularnego dopasowującego pojedyncze liczby zmiennoprzecinkowe bez uszkadzania sklejonych wartości ścieżek, takich jak .5.5.
3. 3
   Przebiegi wyrażeń regularnych czyszczą zserializowany kod

   XMLSerializer tworzy znormalizowany XML, a następnie ukierunkowane zamiany ciągów usuwają komentarze HTML, metadane edytorów Inkscape/Sodipodi, deklarację XML, zbędne domyślne atrybuty (jak version="1.1") i białe znaki między znacznikami — każdy przebieg ma wąski zakres, więc zawartość węzłów tekstowych nigdy nie jest naruszana.
4. 4
   Rozmiar po gzip i formaty eksportu

   API CompressionStream przeglądarki oblicza rzeczywiste rozmiary po gzip zarówno danych wejściowych, jak i wyniku, bo to one faktycznie decydują o koszcie transferu w sieci. Zoptymalizowany SVG można pobrać, skopiować jako surowy SVG, zamienić na atrybuty camelCase gotowe do React JSX lub zakodować jako CSS data URI — wszystkie konwersje odbywają się lokalnie.

Powiązane narzędzia