Optymalizator SVG

Wklej lub upuść SVG i zmniejsz go za pomocą SVGO. Wszystko pozostaje w przeglądarce.

Jak działa Optymalizator SVG

Optymalizator SVG uruchamia SVGO (SVG Optimizer) w Web Workerze wewnątrz przeglądarki, aby zminifikować i wyczyścić pliki SVG bez ich przesyłania. SVGO stosuje konfigurowalny zestaw wtyczek, które usuwają komentarze, zwijają białe znaki, łączą identyczne ścieżki, konwertują kształty do najbardziej zwartej reprezentacji i usuwają atrybuty bez efektu wizualnego. Wynikiem jest mniejszy SVG renderowany identycznie jak oryginał.

Pliki SVG produkowane przez narzędzia projektowe takie jak Figma, Illustrator czy Inkscape często zawierają znaczny narzut: metadane specyficzne dla edytora, puste grupy, nadmiarowe atrybuty transformacji i deklaracje przestrzeni nazw, których żadna przeglądarka nie potrzebuje. Domyślny zestaw wtyczek SVGO usuwa ten narzut w sposób niezawodny. Zoptymalizowany plik jest oferowany do pobrania, a procentowa redukcja rozmiaru jest wyświetlana, aby można było potwierdzić, że optymalizacja była warta zachodu.

Napisał Bastien Sulyan

Optymalizator SVG: instrukcja krok po kroku

Upuść plik SVG na obszar przesyłania lub kliknij, aby przeglądać.
Web Worker SVGO uruchamia optymalizację natychmiast z domyślnym zestawem wtyczek.
Wyświetl procentową redukcję oraz oryginalne i zoptymalizowane rozmiary pliku.
Kliknij Pobierz, aby zapisać zoptymalizowany SVG na swoim urządzeniu.
Jeśli określone wtyczki powodują problemy z renderowaniem, dostosuj konfigurację wtyczek i ponownie zoptymalizuj.

Typowe zastosowania

Programista front-end optymalizuje ikony eksportowane z Figmy przed ich zatwierdzeniem do produkcyjnego potoku zasobów, zmniejszając każdą ikonę z 4 KB do poniżej 1 KB.
Projektant webowy czyści ilustracje SVG eksportowane z Illustratora, które zawierają warstwy metadanych edytora niewidocznych w przeglądarce, ale zawyżających rozmiar pliku.
Programista budujący czcionkę ikonową z glifów SVG zapewnia, że każdy źródłowy SVG jest czysty i spójnie ustrukturyzowany przed krokiem budowania czcionki.
Inżynier wydajności audytuje wbudowany SVG w HTML i zastępuje każdy rozdęty oryginał wersją zoptymalizowaną przez SVGO, aby poprawić wagę strony.

Często zadawane pytania

Czy SVGO zmieni wygląd mojego SVG?

Domyślne wtyczki SVGO są wybrane tak, aby były wizualnie bezstratne: zoptymalizowany SVG renderuje się identycznie jak oryginał we wszystkich standardowych przeglądarkach. Niektóre agresywne wtyczki (takie jak te zaokrąglające współrzędne ścieżek bardzo mocno) mogą wprowadzać subtelne różnice w renderowaniu. Jeśli zauważysz zmianę wizualną, porównaj oryginalne i zoptymalizowane pliki w przeglądarce i wyłącz konkretną wtyczkę powodującą problem.

Czy plik SVG jest wysyłany na serwer do optymalizacji?

Nie. SVGO działa w Web Workerze wewnątrz karty przeglądarki. Tekst SVG jest odczytywany z lokalnego dysku, przetwarzany w pamięci JavaScript, a wynik jest zwracany do strony do pobrania. Zawartość pliku nie opuszcza Twojego urządzenia.

O ile mniejszy będzie mój SVG?

Redukcja zależy od źródła. Pliki SVG eksportowane z narzędzi projektowych z metadanymi edytora zwykle zmniejszają się o 30 do 70 procent. Ręcznie pisane SVG, które są już zwarte, mogą zanotować tylko 5 do 15 procent redukcji. Narzędzie pokazuje dokładną liczbę bajtów i procent, więc można oceniać każdy plik indywidualnie.

Czy optymalizacja wpływa na animacje SVG lub JavaScript wewnątrz pliku?

Konfiguracja zachowuje elementy animacji i atrybuty SMIL. Usuwa natomiast elementy script: narzędzie dodaje wtyczkę removeScripts ponad domyślny zestaw SVGO, ponieważ SVG, który masz zamiar osadzić, nie powinien zawierać kodu wykonywalnego. Niektóre wtyczki czyszczące atrybuty mogą wchodzić w interakcję z animacjami, jeśli animacja odwołuje się do tych atrybutów po identyfikatorze; sprawdź renderowany wynik po optymalizacji plików używających złożonych animacji.

Czy mogę optymalizować wiele plików SVG naraz?

Bieżąca wersja przetwarza jeden plik SVG na raz. Upuść plik, pobierz wynik, a następnie upuść następny plik. Przetwarzanie wsadowe wielu plików w jednej sesji nie jest dostępne w tej wersji.

Jakiej wersji SVGO używa narzędzie?

Narzędzie zawiera SVGO działające w Web Workerze. Dołączona wersja jest odnotowana w informacjach o narzędziu. SVGO jest aktywnie utrzymywane, a interfejs API wtyczek zmienił się znacząco między wersjami v1, v2 i v3; bieżące narzędzie używa formatu wtyczek v3.

Powiązane narzędzia

Utrzymuj wszystko lokalnie, odkrywaj narzędzia uzupełniające.

Wszystkie narzędzia do obrazów