SVGO: zoptymalizuj SVG bez utraty potrzebnej struktury

Aby zoptymalizować SVG za pomocą SVGO bez zakłócania jego działania na stronie, zachowaj oryginał, ustal, od jakich elementów struktury zależy Twoja strona, a następnie przetestuj na niej osobno zoptymalizowaną kopię. Mniejszy plik i niezmieniony podgląd samej grafiki nie dowodzą, że selektory CSS, skrypty lub odwołania nadal działają.

Nasza oryginalna odznaka pokazuje tę różnicę. Domyślny zestaw ustawień SVGO zmniejszył jej kod źródłowy z 437 do 263 bajtów, ale usunął identyfikator, którego otaczający kod HTML używał do zmiany koloru słońca. Wyłączenie cleanupIds dało kopię o rozmiarze 281 bajtów, która zachowała ten punkt zaczepienia. Te pomiary dotyczą tego jednego przykładu testowego w SVGO 4.1.0, a nie gwarantowanego stopnia kompresji innych grafik.

SVGO edytuje istniejący kod SVG. Jeśli masz tylko PNG lub JPG, najpierw utwórz lub odzyskaj geometrię wektorową. Optymalizacja nie potrafi zamienić obiektów wewnątrz bitmapy w edytowalne ścieżki.

Ustal, które elementy struktury SVG musisz zachować

Zanim uruchomisz optymalizator, odróżnij to, co jest widoczne, od tego, do czego odwołuje się inny dokument lub aplikacja. SVGO default preset obejmuje operacje zmieniające identyfikatory, grupy, style i dane ścieżek. Integracja może też wybrać inny zestaw wtyczek, więc sprawdź konfigurację narzędzia, które faktycznie przetwarza Twój plik.

To odrębne kontrole. Zachowanie identyfikatora nie oznacza zachowania każdej grupy, każdego węzła czy edytowalnego obiektu. Podobnie poprawne renderowanie nie dowodzi, że edytor odtworzy preferowaną przez Ciebie strukturę warstw. Zachowaj edytowalny plik główny i przygotuj kopię do użycia w docelowym kontekście.

W przypadku symboli wielokrotnego użytku poradnik o sprite’ach SVG omawia odwołania po stronie kodu korzystającego z symbolu. Ten artykuł skupia się na tym, co etap optymalizacji może zmienić, zanim plik trafi do tego kodu.

Odtwórz niedziałający punkt zaczepienia dla zewnętrznego CSS

Użyj pustego folderu roboczego w środowisku z dostępnymi Node.js i npm. Zapisz tę ręcznie przygotowaną ilustrację jako input.svg, uwzględniając końcowy znak nowego wiersza. To przykład testowy konfiguracji, a nie wynik konwersji w PerfectVector.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <!-- Original illustration for an SVGO configuration test. -->
  <metadata>Editable master: preserve the badge-accent CSS hook.</metadata>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle id="badge-accent" cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
</svg>

Zainstaluj dokładnie tę wersję, której użyto w tym przykładzie, a następnie utwórz nowy plik wynikowy:

npm install --save-exact svgo@4.1.0
npx svgo input.svg -o default.svg

Uruchom te polecenia w czystym folderze roboczym, aby istniejący plik svgo.config.mjs nie wprowadził nieoczekiwanych ustawień. Oficjalne repozytorium SVGO dokumentuje używanie oddzielnych nazw plików wynikowych i wczytywanie konfiguracji. W procesie budowania projektu przechowuj wersję i konfigurację w systemie kontroli wersji, aby aktualizacja była świadomą zmianą.

Otwórz default.svg jako tekst. Okrąg nadal ma koralowe wypełnienie, ale identyfikator badge-accent zniknął. Wewnątrz dokumentu SVG nie było odwołań do tego identyfikatora. Dokumentacja cleanupIds wyjaśnia, że wtyczka usuwa nieużywane identyfikatory i skraca te, do których istnieją odwołania. Selektor zewnętrznej strony nie jest częścią danych wejściowych tego przykładu testowego.

Aby zobaczyć skutek, umieść kod SVG bezpośrednio na stronie HTML, a poza SVG dodaj ten styl:

<style>
  #badge-accent { fill: #f5bf42; }
</style>

W tym teście użyj jednej kopii na stronę. Słońce w oryginalnym SVG staje się złote, ponieważ selektor pasuje do elementu. Słońce zoptymalizowane z ustawieniami domyślnymi pozostaje koralowe, ponieważ brakuje jego identyfikatora. Wczytanie któregokolwiek z tych plików przez element img byłoby innym testem: strona zawierająca obraz nie wybierałaby wewnętrznego kształtu w tym samym dokumencie.

Zachowaj punkt zaczepienia, a następnie powtórz test

Zapisz poniższy kod jako svgo.config.mjs w tym samym folderze:

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupIds: false,
        },
      },
    },
  ],
};

Teraz zapisz kolejną kopię:

npx svgo input.svg --config svgo.config.mjs -o preserved.svg
wc -c input.svg default.svg preserved.svg

To nadpisanie ustawień wyłącza jedną wtyczkę, zachowując pozostałe elementy domyślnego zestawu ustawień. Jest punktem wyjścia dla pokazanej zależności od identyfikatora. Nie jest uniwersalną bezpieczną konfiguracją dla dowolnych grafik, animacji, powiązań związanych z dostępnością czy struktury specyficznej dla danej aplikacji.

Uruchomiliśmy powyższe polecenia w czystym folderze roboczym i niezależnie zastosowaliśmy równoważne konfiguracje przez API JavaScript w SVGO 4.1.0. Wyniki CLI i API były identyczne bajt po bajcie, a do zoptymalizowanych plików nie dodano końcowego znaku nowego wiersza. Następnie wyrenderowaliśmy każdy wynik w osobnym dokumencie HTML z tą samą zewnętrzną regułą CSS. Przeglądarka zgłosiła następujące wyniki:

Wynik zachowujący identyfikator pozwolił zaoszczędzić 156 bajtów, czyli około 35,7% tego kodu źródłowego. Był o 18 bajtów większy od wyniku z ustawieniami domyślnymi i zachował potrzebne nam działanie. Białe znaki, zakończenia wierszy, wersje i formatowanie wyniku mogą zmienić liczbę bajtów w Twoich plikach.

W tym teście wszystkie trzy kopie zachowały viewBox="0 0 160 160". Sprawdziliśmy widoczny wynik i wypełnienie obliczone przez przeglądarkę. Nie mierzyliśmy czasu przesyłania przez sieć ani nie testowaliśmy każdej przeglądarki, każdego edytora, każdej funkcji SVG czy każdej integracji z procesem budowania.

Dostosuj ustawienia do konkretnej zależności

Jeśli tylko kilka identyfikatorów pełni funkcję publicznych punktów zaczepienia, cleanupIds udostępnia również opcje preserve i preservePrefixes. Używaj ich, gdy potrafisz wskazać zależność, a następnie powtórz ten sam test w kodzie korzystającym z grafiki. Jeśli kilka plików SVG będzie osadzonych bezpośrednio w jednym dokumencie, sprawdź też, czy identyfikatory się nie powtarzają. Zachowanie identyfikatora, który już się powtarza, nie czyni go unikatowym; zmiana nazwy jednego z nich wymaga zaktualizowania odwołującego się do niego kodu.

Styl lub skrypt wewnątrz SVG może zmienić zachowanie optymalizatora. Dokumentacja cleanupIds opisuje zabezpieczenie, które wstrzymuje działanie wtyczki, gdy takie elementy są obecne. Nie zakładaj, że to zabezpieczenie obejmuje CSS w innym dokumencie, ani nie wymuszaj czyszczenia bez zrozumienia, które odwołania zależą od identyfikatorów.

Precyzję liczbową traktuj oddzielnie. Mniejsza liczba miejsc po przecinku może zmniejszyć ilość kodu, ale dopuszczalna zmiana zależy od skali współrzędnych grafiki i końcowego rozmiaru wyświetlania. Sprawdź małe szczeliny, narożniki i krzywe w rozmiarach, w których grafika będzie używana. Pomyślna kontrola identyfikatora nic nie mówi o tych szczegółach.

Zachowaj viewBox, jeśli układ Twojej strony zależy od zapewnianego przez niego skalowania. Dokumentacja wtyczki removeViewBox ostrzega przed konsekwencjami dla skalowania i przycinania. Wtyczka ta nie należy do udokumentowanego domyślnego zestawu ustawień użytego tutaj; jej jawne dodanie to osobna decyzja. Unikaj kopiowania starej konfiguracji bez sprawdzenia, dla jakiej wersji i jakiego zestawu ustawień została napisana.

W przypadku obrysu z dużą liczbą węzłów powstałego podczas wektoryzacji optymalizacja kodu i świadome porządkowanie węzłów również odpowiadają na różne pytania. Skorzystaj z poradnika o węzłach SVG, aby ocenić, czy geometria wymaga uproszczenia, i porównaj sylwetkę po edycji. Mniejszy kod źródłowy nie oznacza automatycznie ścieżki cięcia o bardziej uporządkowanej geometrii.

Sprawdź kopię docelową tam, gdzie będzie używana

Po wybraniu konfiguracji umieść zoptymalizowany plik w rzeczywistym docelowym procesie pracy. Sprawdź stan domyślny oraz wszystkie stany po najechaniu kursorem, zaznaczeniu, zmianie motywu lub podczas animacji, które zależą od tego pliku. Statyczny podgląd może nie ujawnić problemu z selektorem, który działa dopiero po interakcji.

W przypadku grafiki internetowej sprawdź zarówno końcowy wynik procesu budowania, jak i lokalny zoptymalizowany plik. Framework lub bundler może później przeprowadzić własną optymalizację. Powtórz test, jeśli dostarczony kod się różni.

Jeśli przekazujesz plik do dalszej edycji, otwórz kopię w docelowym edytorze i zaznacz części potrzebne odbiorcy. Sprawdź drobne napisy, otwory, oddzielne kolory i przycinanie. Zachowaj główny plik źródłowy nawet wtedy, gdy kopia internetowa przejdzie kontrolę.

Optymalizacja pliku jest też czymś odrębnym od kompresji na potrzeby przesyłania. Poradnik porównujący SVGZ i SVG pokazuje cykl kompresji i dekompresji gzip, który przywraca identyczne bajty źródłowe. SVGO zmienia ten kod źródłowy przed jego dostarczeniem; gzip może następnie zakodować te bajty. Oceniaj każdą operację względem jej własnego celu.

Kiedy wektoryzacja powinna poprzedzać optymalizację

Jeśli brakuje głównego pliku wektorowego, a jedynym źródłem jest płaski obraz PNG lub JPG, proces konwersji obrazu na grafikę wektorową w PerfectVector może pomóc przygotować wstępną wersję SVG. Porównaj wynik ze źródłem i sprawdź otwory, drobne szczegóły oraz oddzielne obszary, zanim go zaakceptujesz. Po sprawdzeniu grafiki dodaj identyfikatory lub grupy potrzebne Twojej stronie, a następnie zoptymalizuj kopię docelową i przetestuj te punkty zaczepienia.

PerfectVector nie jest optymalizatorem istniejącego SVG i nie odtwarza selektorów Twojej witryny. Korzystaj z istniejącego głównego pliku wektorowego, jeśli jest dostępny. Zachowaj zdjęcie jako obraz rastrowy, gdy szczegóły o płynnych przejściach tonalnych są ważniejsze niż edytowalne obrysy. Blogowe poradniki dotyczące przygotowania grafiki wektorowej omawiają te wybory materiału źródłowego.

FAQ

Czy wyłączenie cleanupIds sprawia, że każdy SVG można bezpiecznie zoptymalizować? Nie. Chroni identyfikatory przed usunięciem i minifikacją przez tę wtyczkę, ale inne wtyczki nadal mogą zmieniać style, grupy, kształty lub dane ścieżek. Sprawdź funkcje i odwołania używane w docelowym procesie pracy.

Dlaczego zoptymalizowany SVG wygląda poprawnie samodzielnie, ale źle na mojej stronie? Podgląd samej grafiki może nie uruchamiać zewnętrznego CSS ani skryptów. W naszym przykładzie koralowe wypełnienie zapisane w samym SVG renderowało się normalnie, ale zmiana koloru na złoty przez stronę nie działała, ponieważ wybrany identyfikator został usunięty.

Czy zoptymalizować mój jedyny edytowalny plik główny? Zachowaj plik główny i zapisz zoptymalizowaną kopię docelową. Plik może renderować się poprawnie po optymalizacji, mimo że jego struktura obiektów będzie mniej przydatna do późniejszej edycji.

Czy SVGO może zamienić PNG w ścieżki wektorowe? Nie. SVGO przetwarza kod SVG. Wektoryzacja obrazu rastrowego to wcześniejsza operacja, potrzebna wtedy, gdy grafika wymaga edytowalnej geometrii, a odpowiedni główny plik wektorowy nie istnieje.

Źródła

1. SVGO repository — wyjaśnia instalację, pliki wynikowe tworzone z wiersza poleceń, wczytywanie konfiguracji i API optimize.
2. SVGO default preset — wymienia wtyczki oraz dokumentuje nadpisywanie ustawień i różnice między integracjami.
3. SVGO cleanupIds — dokumentuje usuwanie identyfikatorów, minifikację, opcje zachowywania identyfikatorów i powiązane zabezpieczenia.
4. SVGO removeViewBox — wyjaśnia ryzyko dla skalowania związane z jawnym usunięciem viewBox.

Zachowaj najmniejszą kopię, która przechodzi kontrolę wyglądu i działania grafiki. Jeśli plik początkowy nadal nie ma edytowalnej geometrii wektorowej, przygotuj SVG ze swojej grafiki rastrowej, sprawdź jego kształty i zachowaj dodane punkty zaczepienia przed optymalizacją kopii docelowej.