Optymalizator SVG
Upuść pliki tutaj lub kliknij, aby wybrać
- Bezpieczne
- Przetwarzanie działa na Twoim urządzeniu, więc dane wejściowe/wyjściowe nie są nigdzie wysyłane.
Wyjaśnienie
Analizuje strukturę SVG i usuwa zbędny kod, o ile nie wpływa to na renderowanie. Rozwija style, optymalizuje deklaracje rozmiaru, ogranicza atrybuty i upraszcza dane liczbowe oraz ścieżki, aby skutecznie zmniejszyć rozmiar przy zachowaniu jakości wizualnej.
Zakres optymalizacji
| Style | W miarę możliwości CSS z elementu <style> jest przenoszony do atrybutów style poszczególnych elementów. Następnie może zostać przekształcony w atrybuty prezentacji, takie jak fill i stroke. Puste i zbędne elementy <style> są usuwane. |
|---|---|
| Wymiary | Usuwa deklaracje width i height ze style oraz atrybuty width i height z głównego elementu <svg>. Zachowuje viewBox, potrzebny do responsywnego renderowania. |
| Atrybuty | Usuwa zbędne atrybuty dodawane przez narzędzia projektowe, takie jak Figma, Adobe XD i Illustrator, np. data-name. Atrybuty id i class również mogą zostać usunięte, jeśli nie są używane albo stają się zbędne po scaleniu lub konwersji elementów, np. z <line> na <path>. |
| Odwołania | Sprawdza atrybuty odwołań, takie jak filter, clip-path i mask, i usuwa je, gdy wskazany cel nie istnieje. Poprawne odwołania wpływające na wygląd są zachowywane. |
| Liczby i ścieżki | Porównuje wyniki renderowania dla różnych dokładności zaokrąglania (floatPrecision) i automatycznie wybiera najlżejszą opcję przy minimalnych różnicach wizualnych. Upraszcza też dane ścieżek, takie jak atrybut d elementu <path>, usuwa zbędne odstępy i powtórzenia oraz stosuje multipass, aby wielokrotnie optymalizować plik i maksymalnie zmniejszyć jego rozmiar. |
| Zgodność | Aby uniknąć problemów z renderowaniem, zachowywany jest viewBox. Jeśli SVG zawiera elementy <text>, zachowywany jest też xml:space, który steruje obsługą odstępów; bez <text> może zostać usunięty. W animowanych plikach SVG część optymalizacji jest wyłączana dla bezpieczeństwa. Złożony CSS, którego nie da się łatwo przenieść do stylów wbudowanych, również może pozostać, aby zachować pierwotny wygląd. |
Uwagi
Stopień zmniejszenia rozmiaru i końcowy wynik zależą od struktury i zapisu SVG. Style trudne do automatycznego rozwinięcia lub osadzenia, np. złożone selektory albo zapytania medialne, mogą pozostać, aby zachować poprawne renderowanie.
Podczas scalania lub konwersji elementów, np. z <line> na <path>, atrybuty id i class pierwotnych elementów mogą zostać usunięte, jeśli po zmianie struktury nie są już potrzebne.
Atrybuty odwołań, takie jak filter, clip-path i mask, są automatycznie usuwane, gdy wskazany cel nie istnieje, np. przy zerwanym odwołaniu url(#...), aby zachować spójność SVG.
Pliki SVG z animacjami, np. animacjami CSS lub znacznikami <animate>, można optymalizować, ale część operacji jest ograniczana, ponieważ łatwo zaburzyć działanie animacji. Jeśli SVG zawiera skrypty (JS), optymalizacja może spowodować nieoczekiwane zachowanie.