Softonic

Kompresuj SVG

Krok 1 / 2
Dalej

SVG wyeksportowany z Figmy, Illustratora lub Sketcha zawiera zwykle od 2 do 5 razy więcej kodu, niż potrzebuje: przestrzenie nazw edytora, komentarze, puste grupy, zbędne transformacje i współrzędne z sześcioma miejscami po przecinku. To narzędzie przepuszcza Twój plik SVG przez przetwarzanie w stylu SVGO, usuwając zbędne elementy i zachowując renderowany wynik co do piksela.

Jak skompresować plik SVG

  1. 1

    Wklej lub prześlij swój plik SVG

    Przyjmuje surowy tekst XML lub plik .svg.

  2. 2

    Wybierz poziom optymalizacji

    Bezpieczny (usunięcie komentarzy i metadanych edytora), agresywny (zwijanie grup, zaokrąglanie współrzędnych, łączenie ścieżek) lub niestandardowy.

  3. 3

    Przejrzyj różnicę

    Porównaj liczbę bajtów przed i po, a następnie podejrzyj renderowany wynik, aby upewnić się, że nic nie zmieniło się wizualnie.

  4. 4

    Skopiuj lub pobierz

    Wklej zoptymalizowany kod SVG bezpośrednio do swojego kodu lub zapisz jako plik.

Co powoduje nadmierny rozmiar pliku SVG

Otwórz plik SVG wyeksportowany z Figmy w edytorze tekstu, a zwykle zobaczysz:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generator: Figma ... -->
  <title>icon</title>
  <desc>Created with Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

Niemal każdą linię można usunąć. Renderowany wynik potrzebuje tylko svg, viewBox i path.

Co usuwa optymalizator

Co usunięto Dlaczego jest to bezpieczne
Komentarze XML Nigdy nie są renderowane
Przestrzenie nazw edytora (sketch, figma) Nieużywane przez przeglądarki
<title> / <desc> (opcjonalnie) Tekst dla dostępności, zachowaj, jeśli ma znaczenie
Puste grupy <g> Brak efektu wizualnego
Domyślne wartości atrybutów Przeglądarki i tak używają wartości domyślnych
Transformacje tożsamościowe translate(0,0) nic nie robi
Miejsca dziesiętne we współrzędnych 3 miejsca po przecinku wyglądają na ekranie identycznie
Nieużywane identyfikatory Zachowuj tylko ID, do których są odwołania w innych miejscach

Pułapki

  • Nie usuwaj identyfikatorów wskazywanych przez CSS lub url(#...) w wypełnieniach, maskach i filtrach. Tryb agresywny może zepsuć gradienty.
  • Zachowaj viewBox. Bez niego SVG nie będzie skalować się responsywnie.
  • Zachowaj <title>, jeśli używasz go dla dostępności (czytniki ekranu go odczytują).
  • Unikaj zwijania instancji <use>. Optymalizator może je wbudować w kod i utracić wzorzec będący jedynym źródłem prawdy.

Kiedy kompresja naprawdę oszczędza bajty

SVG to tekst, co oznacza, że gzip na serwerze już usuwa sporą część redundancji. SVG, który nieskompresowany spada z 4 KB do 1 KB, w transmisji może zmaleć tylko z 1,2 KB do 0,7 KB. Mimo to warto, a mniejszy plik źródłowy jest też łatwiejszy do czytania.

Najczęściej zadawane pytania

Tryb bezpieczny tego nie robi. Tryb agresywny może usunąć identyfikatory odwoływane przez animacje CSS lub SMIL – jeśli Twoje SVG zawiera animacje, użyj trybu bezpiecznego lub ręcznie dodaj te identyfikatory do listy dopuszczalnych.

Eksport plików w formacie Figma/Illustrator zazwyczaj zmniejsza rozmiar o 50–80%. Pliki SVG napisane ręcznie są już kompaktowe i zazwyczaj zmniejszają się o zaledwie 10–20%.

Domyślnie odpowiedź to tak – atrybuty <title>, <desc> i aria-* są zachowywane. Można je usunąć, jeśli plik SVG ma wyłącznie charakter dekoracyjny, a etykietę zawiera kod HTML umieszczone w jego otoczeniu.

Tak. Atrybut xmlns jest zachowywany, ponieważ jest wymagany przy wklejaniu SVG bezpośrednio do HTML. Wbudowany (inline) SVG to zwykle najszybszy sposób dostarczania małych ikon.

Powiązane narzędzia

Masowa zmiana rozmiaru obrazów

Przeciągnij kilka obrazów, dopasuj je lub rozciągnij do rozmiaru docelowego i wyeksportuj JPG, PNG albo WebP w jednym ZIP-ie. Przetwarzanie zostaje w przeglądarce.

Komprimuj plik GIF

Zmniejsz animowany plik GIF w przeglądarce: obniż wymiary, zachowaj mniej klatek i dopasuj jakość kodowania. Zobacz podgląd pętli przed pobraniem.

Wektoryzator PNG do SVG

Przekształcaj obrazy rastrowe PNG w ścieżki SVG bezpośrednio w przeglądarce. Najlepsze do logo, ikon i rysunków liniowych. Steruj progiem, liczbą kolorów i wygładzaniem.

Zmiana rozmiaru obrazu

Zmieniaj rozmiar obrazów do dokładnych wymiarów w pikselach lub procentach, zachowując proporcje. Dobre do pracy partiami, bez przesyłania plików.

Kompresor obrazów

Kompresuj obrazy JPG, PNG i WebP, aby zmniejszyć rozmiar pliku przy zachowaniu jakości wizualnej. Wszystko w Twojej przeglądarce, bez wysyłania plików.

Narzędzie do zmiany rozmiaru obrazów do social media

Zmień rozmiar jednego obrazu do wbudowanych presetów dla Instagramu, Facebooka, X, LinkedIn, YouTube, Pinteresta i TikToka. Sprawdź każdy PNG i pobierz potrzebne formaty.