Utilia
Kategorie ▾
Język: pl ▾

Optymalizator SVG

Optymalizuj i minifikuj pliki SVG online za pomocą SVGO w przeglądarce. Wybierz ustawienie, porównaj wynik wizualnie i sprawdź oszczędność oraz rozmiar po gzip.

Wtyczki

Usunięcie viewBox sprawia, że rysunek przestaje się skalować, a skracanie lub usuwanie ID psuje odwołujące się do nich reguły CSS, JavaScript, elementy <use> i kotwice. Dla plików SVG używanych w kodzie, sprite’ach lub animacjach zostaw ustawienie Bezpieczne.

Jak zoptymalizować plik SVG

  1. Upuść plik SVG na pole albo kliknij je, aby go wybrać. Możesz też wkleić kod w pole Kod SVG.
  2. Wybierz Ustawienie wstępne: Bezpieczne, Zrównoważone (domyślne) lub Maksymalne. Lista Wtyczki poniżej pokazuje dokładnie, które kroki włącza każde ustawienie.
  3. W razie potrzeby dostosuj Precyzja dziesiętna (od 0 do 8 cyfr), Wiele przebiegów oraz Formatowanie (kod z wcięciami), jeśli chcesz czytelny kod. Gdy tylko zmienisz wtyczkę, precyzję lub przebiegi, ustawienie przełącza się na Własne.
  4. Kliknij Optymalizuj SVG. Upuszczony plik jest optymalizowany od razu, a gdy wynik już istnieje, każda zmiana ustawień automatycznie uruchamia optymalizację ponownie.
  5. Sprawdź wartości Rozmiar oryginału, Rozmiar po optymalizacji, Oszczędność i Po gzip, a potem porównaj oba rysunki obok siebie.
  6. Kliknij Kopiuj, aby skopiować Zoptymalizowany kod SVG, albo Pobierz zoptymalizowany SVG, aby zapisać go jako nazwa.min.svg.

Optymalizację wykonuje SVGO 4 – standardowy, otwartoźródłowy (MIT) optymalizator SVG używany w większości narzędzi do budowania stron. Jego wersja przeglądarkowa jest wczytywana przy pierwszym kliknięciu i działa w całości na twoim urządzeniu: twój plik SVG nigdy nie jest przesyłany.

Dlaczego pliki SVG z programów graficznych są tak ciężkie

SVG wyeksportowany z Illustratora, Inkscape’a, Figmy czy Sketcha zawiera dużo więcej niż sam rysunek. Edytory dodają własne przestrzenie nazw i atrybuty (nazwy warstw, prowadnice, ustawienia eksportu), blok <metadata>, komentarze w rodzaju „Generator: Adobe Illustrator”, współrzędne z sześcioma lub więcej miejscami po przecinku, grupy zawierające jeden element i rozwlekłe kolory, takie jak #ffffff. Nic z tego nie zmienia tego, co rysuje przeglądarka. SVGO to usuwa, zaokrągla liczby, przepisuje dane ścieżek krótszymi poleceniami, skraca zapis kolorów i scala lub rozpakowuje zbędne elementy. Redukcja o 40–60% jest typowa dla eksportowanych ikon i ilustracji.

Ustawienia wstępne i ryzykowne wtyczki

  • Bezpieczne uruchamia domyślne ustawienie SVGO, ale zachowuje ID, <desc>, osobne ścieżki i reguły <style>, z 3 miejscami po przecinku i jednym przebiegiem. Używaj go do plików SVG, do których odwołuje się CSS lub JavaScript, sprite’ów i animacji.
  • Zrównoważone to domyślne ustawienie SVGO, 3 miejsca po przecinku, wiele przebiegów. Pasuje do większości ikon i ilustracji wyświetlanych jako obrazy.
  • Maksymalne dodaje Usuń </strong>, <strong>Usuń skrypty i atrybuty zdarzeń</strong>, <strong>Usuń width/height (zachowaj viewBox)</strong> i <strong>Zamień xlink:href na href</strong>, z 2 miejscami po przecinku i wieloma przebiegami.</li> </ul> <p>Żadne ustawienie wstępne nie usuwa viewBox. <strong>Usuń viewBox</strong> jest przeznaczone tylko do szczególnych przypadków: bez niego rysunek nie skaluje się już do rozmiaru nadanego w CSS.</p> <p>Wiedz, co mogą zepsuć pozostałe wtyczki:</p> <ul> <li><strong>Skróć i usuń nieużywane ID</strong> zmienia ID, np. <code>#icon-home</code>, na <code>a</code>. Każdy selektor CSS, zapytanie JavaScript, odwołanie do sprite’a <code><use href="#…"></code>, kotwica na stronie czy animacja SMIL/CSS wskazująca starą nazwę przestaje działać.</li> <li><strong>Usuń <title></strong> i <strong>Usuń <desc></strong> kasują dostępną nazwę i opis. Zachowaj je w ikonach i wykresach, które mają znaczenie i muszą być odczytywane przez czytniki ekranu.</li> <li>Niska <strong>Precyzja dziesiętna</strong> może zniekształcić małe ikony: krzywe falują, a krawędzie się przesuwają. Zawsze sprawdzaj porównanie wizualne; 3 to bezpieczna wartość domyślna.</li> <li><strong>Scal ścieżki</strong> łączy sąsiednie ścieżki w jedną, więc efekt hover lub animacja przypisane do pojedynczej ścieżki tracą swój cel.</li> </ul> <h2>Wskazówki</h2> <ul> <li>Zachowaj niezoptymalizowaną kopię wzorcową do edycji; plik <code>.min.svg</code> traktuj jak skompilowany kod.</li> <li>Włącz gzip lub brotli na serwerze: formaty tekstowe, takie jak SVG, kompresują się bardzo dobrze, a wartość <strong>Po gzip</strong> pokazuje, ile faktycznie pobierają odwiedzający (widoczna, gdy przeglądarka obsługuje <code>CompressionStream</code>).</li> <li>SVG osadzony bezpośrednio w HTML można stylować CSS-em i animować, ale nie jest osobno buforowany; SVG w <code><img></code> jest buforowany, ale nie da się go stylować ze strony.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Najczęściej zadawane pytania</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Czy mój plik SVG jest przesyłany na serwer?</summary> <div class="prose px-5 pb-5"><p>Nie. SVGO działa w twojej przeglądarce. Jedyne pobieranie to sam kod optymalizatora przy pierwszej optymalizacji.</p></div> </details> <details class="faq group"> <summary>Dlaczego podgląd jest wyświetlany jako obrazy?</summary> <div class="prose px-5 pb-5"><p>SVG to format dokumentu, który może zawierać JavaScript i wczytywać zewnętrzne pliki. Oba podglądy są renderowane jako <code><img></code> z lokalnych adresów blob, a w tym trybie przeglądarki nigdy nie uruchamiają skryptów ani nie pobierają zewnętrznych zasobów, więc podgląd niezaufanego SVG jest tu bezpieczny. Sam zoptymalizowany kod nadal zawiera ewentualne skrypty, chyba że włączona jest opcja <strong>Usuń skrypty i atrybuty zdarzeń</strong> (włącza ją ustawienie <strong>Maksymalne</strong>).</p></div> </details> <details class="faq group"> <summary>Mój zoptymalizowany SVG przestał się skalować. Co się stało?</summary> <div class="prose px-5 pb-5"><p>Najpewniej usunięto viewBox – opcją <strong>Usuń viewBox</strong> albo wcześniej innym narzędziem. Zoptymalizuj oryginał ponownie z wyłączoną tą wtyczką.</p></div> </details> <details class="faq group"> <summary>Dlaczego mój sprite z ikonami lub animacja przestały działać?</summary> <div class="prose px-5 pb-5"><p><strong>Skróć i usuń nieużywane ID</strong> albo <strong>Scal ścieżki</strong> zmieniły elementy, do których odwołuje się twój kod. Użyj ustawienia <strong>Bezpieczne</strong>, które zachowuje jedno i drugie.</p></div> </details> <details class="faq group"> <summary>Zoptymalizowany plik nie jest mniejszy. Dlaczego?</summary> <div class="prose px-5 pb-5"><p>Plik SVG jest prawdopodobnie już zminifikowany. Spróbuj ustawienia <strong>Maksymalne</strong> lub niższej wartości <strong>Precyzja dziesiętna</strong> i wyłącz <strong>Formatowanie (kod z wcięciami)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Podobne narzędzia</h2> <ul class="card-grid mt-4"><li><a class="card" href="/pl/svg-na-png/"> <span class="card-title">Konwerter SVG na PNG</span> <span class="card-text">Konwertuj SVG na PNG, JPG lub WebP w przeglądarce – w dowolnej szerokości, wysokości, skali lub DPI, z przezroczystym albo kolorowym tłem. Wiele plików i ZIP.</span> </a></li> <li><a class="card" href="/pl/obraz-na-svg/"> <span class="card-title">Wektoryzacja obrazu do SVG</span> <span class="card-text">Zamień logo lub rysunek PNG albo JPG na wektorowe ścieżki SVG w przeglądarce. Ustawienia wstępne, liczba kolorów, filtr plamek i pobieranie, bez przesyłania.</span> </a></li> <li><a class="card" href="/pl/kompresja-zdjec/"> <span class="card-title">Kompresja zdjęć</span> <span class="card-text">Kompresuj obrazy JPG, PNG i WebP suwakiem jakości, porównuj rozmiar przed i po i przetwarzaj wiele zdjęć naraz bez przesyłania ich na serwer.</span> </a></li> <li><a class="card" href="/pl/formatowanie-css/"> <span class="card-title">Formatowanie i minifikacja CSS</span> <span class="card-text">Sformatuj nieczytelny CSS z równymi wcięciami albo zminifikuj go za pomocą csso i porównaj rozmiar. Działa w przeglądarce, nic nie jest wysyłane.</span> </a></li> </ul> </section> </article> <div class="hidden lg:block"> <div class="sticky top-24"><aside class="ad-slot ad-slot-sidebar" data-ad-slot="sidebar" aria-label="Reklama"><span class="ad-label">Reklama</span></aside> </div> </div> </div> </main> <footer class="mt-16 border-t border-line bg-surface"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3 text-sm"> <div> <p class="font-semibold">Utilia</p> <p class="mt-2 text-muted">Darmowe narzędzia online działające w twojej przeglądarce. Twoje dane zostają na twoim urządzeniu.</p> </div> <nav aria-label="Kategorie"> <p class="font-semibold">Narzędzia</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/pl/narzedzia-tekstowe/">Narzędzia tekstowe</a></li><li><a class="link-muted" href="/pl/narzedzia-dla-programistow/">Narzędzia dla programistów</a></li><li><a class="link-muted" href="/pl/web-seo-marketing/">Web, SEO i marketing</a></li><li><a class="link-muted" href="/pl/kolory-i-design/">Kolory i design</a></li><li><a class="link-muted" href="/pl/obrazy-i-zdjecia/">Obrazy i zdjęcia</a></li><li><a class="link-muted" href="/pl/pdf-i-dokumenty/">PDF i dokumenty</a></li><li><a class="link-muted" href="/pl/kalkulatory-matematyczne/">Kalkulatory matematyczne</a></li><li><a class="link-muted" href="/pl/kalkulatory-finansowe/">Kalkulatory finansowe</a></li><li><a class="link-muted" href="/pl/data-i-czas/">Data i czas</a></li><li><a class="link-muted" href="/pl/przeliczniki-jednostek/">Przeliczniki jednostek</a></li><li><a class="link-muted" href="/pl/zdrowie-i-fitness/">Zdrowie i fitness</a></li><li><a class="link-muted" href="/pl/dom-kuchnia-auto/">Dom, majsterkowanie, kuchnia i auto</a></li><li><a class="link-muted" href="/pl/generatory/">Generatory</a></li><li><a class="link-muted" href="/pl/testy-urzadzen/">Testy urządzeń i przeglądarki</a></li><li><a class="link-muted" href="/pl/audio-wideo/">Audio i wideo</a></li><li><a class="link-muted" href="/pl/edukacja-i-jezyki/">Edukacja i języki</a></li><li><a class="link-muted" href="/pl/gry/">Gry</a></li></ul> </nav> <nav aria-label="Informacje"> <p class="font-semibold">Informacje</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/pl/o-nas/">O nas</a></li> <li><a class="link-muted" href="/pl/kontakt/">Kontakt</a></li> <li><a class="link-muted" href="/pl/polityka-prywatnosci/">Polityka prywatności</a></li> <li><a class="link-muted" href="/pl/regulamin/">Regulamin</a></li> </ul> </nav> </div> <p class="border-t border-line py-4 text-center text-xs text-muted">© 2026 Utilia</p> </footer> </body> </html>