Softonic

Minifikacja kodu SVG

Krok 1 / 2
Dalej

Minifikacja SVG zamienia czytelne, wcinane znaczniki w jeden zwarty wiersz, który przeglądarki renderują tak samo. Wklej kod, uruchom minifikator i skopiuj wersję gotową do arkusza stylów, szablonu lub pliku komponentu.

Jak zminifikować kod SVG

  1. 1

    Wklej znaczniki

    Umieść cały element svg, z otwierającym i zamykającym znacznikiem, w polu źródła SVG.

  2. 2

    Wybierz, co usunąć

    Zostaw zaznaczone komentarze, metadane, białe znaki i doctype, aby uzyskać najmniejszy wynik.

  3. 3

    Wybierz liczbę miejsc po przecinku

    Domyślne 2 pasuje do większości ikon. Podnieś ją do 3, jeśli krzywa wygląda źle po minifikacji.

  4. 4

    Zminifikuj i skopiuj

    Kliknij Dalej, a potem Kompresuj, i użyj przycisku Kopiuj w polu wyniku.

Co minifikator robi z Twoim kodem

Narzędzie przetwarza tekst SVG w stałej kolejności: usuwa deklarację XML i doctype, następnie komentarze, następnie elementy metadanych, title i description, zaokrągla miejsca po przecinku, a na końcu scala białe znaki. Każdy ciąg spacji, tabulatorów i podziałów wierszy staje się pojedynczą spacją, a spacje między zamykającym a otwierającym znacznikiem znikają, dzięki czemu powstaje jedna linia.

Przed i po

Dane wejściowe, 126 bajtów:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <!-- dot -->
  <circle cx="8.000" cy="8.000" r="3.500"/>
</svg>

Wynik przy domyślnych ustawieniach, 97 bajtów (oszczędność 23 %):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3.5"/></svg>

Zwróć uwagę, że 8.000 zamieniło się w 8, a 3.500 w 3.5: po zaokrągleniu końcowe zera są usuwane.

Czego nie rusza

To minifikator tekstu, a nie pełny optymalizator. Zachowuje nazwy atrybutów, ID, klasy, grupy, transformacje i polecenia ścieżek bez zmian. To celowe: ID, do których odwołuje się CSS, skrypt lub gradient, dalej działają, a struktura pliku pozostaje czytelna, jeśli będziesz musiał go później edytować.

Rzeczy, na które trzeba uważać

  • Scalanie białych znaków dotyczy też tekstu wewnątrz elementów, więc etykieta z kilkoma spacjami z rzędu pokaże jedną spację.
  • Zaokrąglanie dotyczy każdej liczby dziesiętnej, także wersji zapisanych w atrybutach, na przykład 1.10 stanie się 1.1.
  • Zminifikowany kod jest trudny do czytania. Zachowaj oryginał w systemie kontroli wersji i używaj zminifikowanej kopii wyłącznie jako wyniku.

Szybka kontrola po minifikacji

Wklej zminifikowany wiersz do pustego pliku HTML i otwórz go w przeglądarce obok oryginału. Oba powinny wyglądać identycznie. Jeśli gradient, maska lub ścieżka przycinania przestała działać, sprawdź, czy ktoś ręcznie nie zmienił ID lub odwołania, ponieważ samo narzędzie ich nie zmienia. Jeśli bardzo drobny detal się przesunął, podnieś precyzję do 3 lub więcej i uruchom ponownie.

Gdzie użyć wyniku

SVG w jednym wierszu wkleja się czysto do pliku HTML, komponentu JSX, data URI albo reguły tła w CSS, gdzie podziały wierszy wymagałyby escapowania.

Najczęściej zadawane pytania

Minifikacja usuwa zbędne znaki z tekstu. Kompresja, na przykład gzip na serwerze, pakuje tekst do przesłania. Można je łączyć, a zminifikowany plik i tak zostanie dodatkowo skompresowany podczas transferu.

Domyślnie nie, ponieważ ID, klasy i struktura elementów są zachowane. Usuwane są tylko komentarze, elementy metadanych, doctype i odstępy.

Narzędzie nie formatuje kodu. Otwórz zminifikowany tekst w edytorze kodu z funkcją formatowania, aby odzyskać wcięcia, ale usunięte komentarze przepadły na zawsze.

Usuwanie białych znaków kasuje podziały wierszy między znacznikami. Odznacz to pole, jeśli chcesz zachować oryginalny układ.

Powiązane narzędzia

Generator kolorów triadycznych

Wybierz kolor bazowy i otrzymaj jego dwóch triadycznych partnerów, obróconych dokładnie o 120° i 240° na kole barw, z kodami HEX do skopiowania jednym kliknięciem.

Kreator mozaiki LEGO

Zamień zdjęcie w plan mozaiki 16 × 16, 32 × 32, 48 × 48 lub 64 × 64. Zobacz przybliżone kolory, policz płytki 1×1 i pobierz ponumerowaną instrukcję układania.

Generator papieru nutowego

Utwórz papier nutowy do druku: puste pięciolinie, klucz wiolinowy lub basowy, system fortepianowy albo tabulatura gitarowa. Wybierz liczbę, odstęp, A4 lub Letter i marginesy, pobierz PDF lub SVG.

Zmień rozmiar PNG

Zmieniaj rozmiar obrazów PNG bezpośrednio w przeglądarce. Ustaw nową szerokość i wysokość w pikselach, zablokuj proporcje i zachowaj przezroczyste tło. Nic nie jest wysyłane.

Generator napisów graffiti

Twórz napisy graffiti w stylu tag, bubble, block, stencil, neon i wild. Dobierz kolory i wyeksportuj PNG lub SVG bezpośrednio w przeglądarce.

Czytnik kodów kreskowych

Odczytaj z obrazu wartość i rodzaj kodu EAN-13, UPC-A lub Code 128. W przypadku EAN i UPC sprawdzisz także cyfrę kontrolną.

Narzędzie jest dostępne w innych językach

Poradniki i zastosowania