Optymalizator SVG

Czym jest Optymalizator SVG?

Optymalizator SVG to bezpłatne narzędzie w przeglądarce dla projektantów stron, autorów ikon i programistów front-end, którzy muszą odchudzić ręcznie pisany lub wyeksportowany SVG przed wdrożeniem. Edytory wektorowe dodają niewidoczny balast: komentarze XML, bloki metadanych, atrybuty Inkscape/Sodipodi/Illustrator, zbędne miejsca dziesiętne, bezużyteczne transformacje, opakowujące grupy oraz identyfikatory i defs, do których nic się nie odwołuje. Włącz każde czyszczenie w Ustawieniach, wklej znaczniki lub upuść plik .svg, obserwuj, jak podglądy Oryginał i Zoptymalizowany aktualizują się obok siebie, i odczytaj statystyki Przed, Po, Zaoszczędzono, Gzip i Brotli. Skopiuj wynik lub pobierz jako .min.svg. Używaj go do odchudzania wbudowanych ikon, arkuszy sprite, logo i ilustracji.

Jak używać Optymalizator SVG

1. Wklej swój SVG lub upuść/prześlij plik .svg — znaczniki wypełnią pole wprowadzania.
2. Otwórz Ustawienia i włącz dokładnie te czyszczenia, które chcesz: zaokrąglanie współrzędnych, usuwanie komentarzy, metadanych i atrybutów edytora, puste grupy, nieużywane ID i defs, scalanie transformacji, minifikacja stylów wbudowanych, skracanie kolorów hex, usuwanie domyślnych wartości i minifikacja białych znaków.
3. Jeśli zaokrąglanie współrzędnych jest włączone, ustaw dokładność (0-5 miejsc dziesiętnych).
4. Porównaj podglądy Oryginał i Zoptymalizowany obok siebie, aby potwierdzić, że rysunek nadal wygląda dobrze.
5. Odczytaj statystyki Przed, Po, Zaoszczędzono, Gzip i Brotli, aby zobaczyć rzeczywisty zysk rozmiaru.
6. Skopiuj zoptymalizowany SVG lub pobierz go jako plik .min.svg.

Przykłady

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

Najczęściej zadawane pytania

Co dokładnie usuwa optymalizator?

Przy włączonych odpowiednich przełącznikach: komentarze XML, elementy <metadata>, <title> i <desc>, atrybuty przestrzeni nazw edytora (Inkscape, Sodipodi, Illustrator), puste grupy, identyfikatory, do których nic się nie odwołuje, i nieodwoływane <defs>. Może też zaokrąglać atrybuty liczbowe i dane ścieżki, scalać bezużyteczne transformacje, minifikować atrybuty style i CSS w <style>, skracać kolory hex (#ffffff→#fff) oraz usuwać domyślne atrybuty prezentacji, takie jak fill-opacity="1".

Czy zaokrąglanie współrzędnych zmieni wygląd mojego SVG?

Zaokrąglanie do niskiej dokładności może przesunąć punkty o maleńki ułamek jednostki, zwykle niewidoczny, ale mniejszy. Zwiększ dokładność (do 5 miejsc) dla dokładnej geometrii lub wyłącz zaokrąglanie, aby pozostawić liczby nietknięte.

Czy mogę wczytać plik i podejrzeć wynik?

Tak. Upuść lub prześlij plik .svg (albo wklej znaczniki), a podglądy Oryginał i Zoptymalizowany pojawią się obok siebie, byś mógł wychwycić wszelkie usterki. Następnie skopiuj wynik lub pobierz zoptymalizowany .min.svg — nic nie jest przesyłane; plik jest czytany lokalnie.

Co oznaczają liczby Gzip i Brotli?

Rozmiar Gzip jest mierzony przez faktyczne skompresowanie zoptymalizowanego SVG w Twojej przeglądarce, więc odzwierciedla rzeczywiste bajty na połączeniu z gzip. Liczba Brotli to szacunek wyprowadzony z tego rozmiaru gzip (brotli zwykle kompresuje tekst nieco mocniej); prawdziwy koder brotli jest zbyt ciężki, by go dołączyć, więc jest oznaczony tyldą.

Czy mój SVG jest gdzieś przesyłany?

Nie. Parsowanie, czyszczenie, pomiar rozmiaru i serializacja odbywają się lokalnie w Twojej przeglądarce za pomocą wbudowanego DOMParser. Nic nie jest wysyłane na serwer, więc narzędzie działa offline, a Twoja grafika pozostaje prywatna.