Optymalizacja SVG online. Kompresuj i porządkuj pliki w sekundę

To narzędzie pozwala hurtowo minimalizować i czyścić pliki SVG bez utraty jakości wizualnej. Wgrywasz pliki, zaznaczasz opcje i uruchamiasz optymalizację. Mechanizm bazuje na SVGO oraz bezpiecznych fallbackach, a wyniki prezentuje w czytelnej tabeli z oszczędnościami i szybkim pobieraniem.

Zobacz jak działa

Co potrafi narzędzie i dla kogo jest przeznaczone

Moduł Optymalizacja SVG upraszcza pracę grafików, webdeveloperów i marketerów, którzy chcą zmniejszyć wagę ikon lub ilustracji przy zachowaniu ostrości wektorów. Działa w trybie wielopliku, wykorzystuje asynchroniczne przetwarzanie po stronie serwera i wyświetla podglądy. Otrzymujesz zestaw gotowych opcji zgodnych z praktyką SVGO, w tym usuwanie komentarzy i metadanych, czyszczenie identyfikatorów, eliminację nieużywanych definicji oraz możliwość zachowania atrybutu viewBox. Panel obsługuje przeciąganie i upuszczanie, informuje o rozmiarze plików i pilnuje limitu ciężaru.

• Automatyczna minimalizacja rozmiaru przy pełnej kontroli nad kluczowymi wtyczkami.
• Podgląd miniatur i informacja o rozmiarze przed optymalizacją.
• Tabela wyników z procentem oszczędności i możliwością pobrania pojedynczego pliku.
• Bezpieczne fallbacki na wypadek braku binarki SVGO w środowisku.
• Możliwość utrzymania responsywności przez zachowanie viewBox.

Jak działa mechanizm pod spodem

Komponent Livewire zbiera przesłane pliki i natychmiast buduje listę podglądu. Metoda optimize waliduje typ MIME i rozmiar, następnie dla każdego pliku uruchamia sekwencję optymalizacji. Najpierw wykrywa ścieżkę do SVGO w systemie. Jeśli narzędzie jest dostępne, buduje minimalny plik konfiguracyjny JSON z listą włączonych wtyczek i wywołuje komendę SVGO z opcją --config. Gdy SVGO nie jest dostępne, próbuje łańcucha optymalizatora obrazów w stylu Spatie. Jeśli i to nie przejdzie, używa bezpiecznej redukcji przez usuwanie komentarzy i zwijanie białych znaków. Każdy wynik trafia do publicznego storage i dostaje adres URL do pobrania.

// Pseudokod ścieżki
for file in local_files:
  temp = storeTemp(file)
  before = filesize(temp)
  cfg = buildSvgoConfig(options)   // removeComments, removeMetadata, cleanupIDs, removeUselessDefs, removeViewBox
  if svgoAvailable():
     run `svgo --input temp --output out --config cfg`
  else if spatieChainAvailable():
     copy temp -> out; ImageOptimizer::optimize(out)
  else:
     out = basicMinify(temp)       // regex na komentarze + kompresja białych znaków
  after = filesize(out)
  saved = max(0, before - after)
  percent = before > 0 ? round(saved/before*100, 2) : 0
  url = Storage::disk('public')->putFileAndGetUrl(out)
  pushRow(name, before, after, saved, percent, url)

Mapa opcji i ich wpływ na plik

Instrukcja użycia krok po kroku

1. Kliknij przycisk wgrywania i zaznacz pliki SVG lub przeciągnij je do pola. Zobaczysz miniatury oraz rozmiary.
2. Zaznacz opcje czyszczenia według potrzeb. Domyślnie włączone są komentarze, metadane, czyszczenie ID, nieużywane definicje i zachowanie viewBox.
3. Wciśnij Uruchom optymalizację. Rozpocznie się przetwarzanie wsadowe. Status pojawi się nad panelem.
4. Po zakończeniu otwórz tabelę wyników. Sprawdź kolumny rozmiar przed i po, oszczędność w KB i procentach. Kliknij Pobierz aby ściągnąć zoptymalizowaną wersję.
5. Jeżeli chcesz zacząć od nowa, wybierz Wyczyść wyniki i wgraj kolejne pliki.

Struktura interfejsu i tabela wyników

Parametry, limity i walidacja

• Akceptowane typy: image/svg+xml, .svg, opcjonalnie text/plain lub application/xml dla niektórych eksportów.
• Maksymalny rozmiar pojedynczego pliku kontroluje zmienna $max_file_size_mb. Domyślnie 10 MB.
• Przetwarzanie odbywa się tymczasowo w katalogu storage/app/livewire-tmp.
• Wyniki zapisywane są na dysku publicznym w katalogu tools/svg-optimizer i otrzymują publiczny URL.

Wgląd w implementację

public function optimize() {
  $this->validate(['local_files.*' => 'file|mimetypes:image/svg+xml,text/plain,application/xml|max:' . ($this->max_file_size_mb * 1024)]);
  $this->results = [];
  foreach ($this->local_files as $i => $f) {
    $temp   = $this->storeTemp($f);
    $before = @filesize($temp) ?: 0;
    $name   = method_exists($f, 'getClientOriginalName') ? $f->getClientOriginalName() : ('plik_' . ($i+1) . '.svg');
    $out    = $temp . '.opt.svg';
    $ok     = $this->runSvgo($temp, $out);
    if (!$ok) $out = $temp;

    $after  = @filesize($out) ?: 0;
    $saved  = ($before > $after) ? ($before - $after) : 0;
    $pct    = ($before > 0) ? round(($saved / $before) * 100, 2) : 0.0;

    $path   = 'tools/svg-optimizer/' . uniqid() . '_' . $name;
    Storage::disk('public')->put($path, @file_get_contents($out));
    $url = Storage::disk('public')->url($path);

    $this->results[] = compact('name','before','after','saved','pct','url');
  }
  session()->flash('status', __('Zakończono optymalizację: ') . count($this->results) . ' ' . __('plików'));
}

Dobre praktyki optymalizacji SVG

• Trzymaj włączone usuwanie komentarzy i metadanych. To czysta korzyść rozmiarowa.
• Zachowaj viewBox aby nie utracić responsywnego skalowania. Usuwaj go tylko celowo.
• Jeśli zależy Ci na ID używanych w CSS lub JS, przetestuj wyniki z wyłączonym Czyść ID lub zabezpiecz selektory.
• Ikony z edytorów często zawierają nieużywane gradienty i symbole. Usuń nieużywane defs zwykle daje duży zysk.
• Pliki eksportowane z PDF mogą mieć nietypowe atrybuty. W takim przypadku włącz optymalizację, ale porównaj wizualnie miniaturę.

Bezpieczeństwo i prywatność

Przetwarzanie plików odbywa się po stronie serwera. Pliki tymczasowe są trzymane wyłącznie na czas optymalizacji. Wyniki trafiają do publicznego storage wyłącznie w celu dostarczenia linku pobrania. W razie potrzeby usuń pliki po pobraniu lub skonfiguruj automatyczne czyszczenie katalogu z wynikami w cronie. Fallback regexowy dotyka wyłącznie komentarzy i białych znaków, nie ingeruje w geometrię ścieżek.

Najczęstsze pytania

Czy optymalizacja zmienia wygląd grafiki

Wtyczki użyte w domyślnej konfiguracji nie modyfikują geometrii. Zmieniają strukturę XML i usuwają treści nieistotne dla renderingu. Wyjątkiem może być czyszczenie ID jeśli odwołujesz się do nich ręcznie.

Co jeśli środowisko nie ma zainstalowanego SVGO

Zadziałają fallbacki. Najpierw próba przez łańcuch optymalizacji obrazów, następnie minimalny minifier oparty o usuwanie komentarzy i białych znaków. Wynik jest stabilny, choć może być mniej agresywny niż natywny SVGO.

Jakie oszczędności są typowe

Dla ikon z edytorów wektorowych oszczędność 30 do 70 procent jest typowa, dla dobrze przygotowanych plików 10 do 25 procent. Największe zyski dają metadane, komentarze i nieużywane definicje.

Czy mogę wyłączyć poszczególne wtyczki

Tak. Każda opcja odpowiada jednej pozycji w konfiguracji. Odznacz pole aby wyłączyć ją w generowanym pliku konfiguracyjnym SVGO.

Dlaczego po optymalizacji plik nie ma atrybutów width i height

To normalne dla podejścia responsywnego. Klucz do skalowania to viewBox. Jeśli chcesz sztywne rozmiary, ustaw je w atrybutach przy osadzaniu lub wyłącz zachowanie viewBox i kontroluj w CSS.

Integracja i osadzanie SVG w HTML

<!-- Wstawka inline z zachowanym viewBox -->
<svg viewBox="0 0 24 24" aria-hidden="true" role="img">
  <path d="..."/>
</svg>

/* Osadzenie jako plik */
<img src="/assets/svg/logo.min.svg" width="120" height="32" alt="Logo">

/* Tło w CSS */
.icon-bg { background: url("/assets/svg/pattern.min.svg") no-repeat center / contain; }

Rozwiązywanie problemów

• Plik nie ładuje się w podglądzie. Sprawdź typ MIME i rozszerzenie. W razie potrzeby zapisz ponownie SVG w edytorze wektorowym.
• Utrata stylu po czyszczeniu ID. Wyłącz Czyść ID lub zaktualizuj selektory w CSS aby nie bazowały na starych wartościach.
• Gradient zniknął po optymalizacji. Jeśli gradient był nieużywany, narzędzie mogło go usunąć. Włącz ponownie i sprawdź referencje url(#id).
• Duży plik po PDF. Niektóre eksporty zawierają skomplikowane ścieżki. Optymalizacja przyniesie mniejszy efekt. Rozważ uproszczenie w edytorze.

To narzędzie służy do automatyzacji i edukacji. Zawsze sprawdź wizualny efekt w docelowym interfejsie. Pamiętaj o polityce retencji plików w swoim projekcie.

Uruchom optymalizację