Jak zoptymalizować SVG do internetu i go nie zepsuć

Za dużo węzłów. Algorytm wektoryzacji stawia punkt wszędzie tam, gdzie skręca granica pikseli, a na wygładzonej krzywej dzieje się to bez przerwy. Krzywa, która potrzebuje czterech punktów, może dostać czterdzieści.

Nadmierna precyzja dziesiętna. Współrzędne w rodzaju 127.38472615 są w wynikach wektoryzacji typowe, a ostatnie cyfry często opisują odległości mniejsze niż piksel w każdym rozmiarze, w jakim plik będzie wyświetlany.

Zdublowane i niewidoczne kształty. Ścieżki o zerowej powierzchni, kształty całkowicie schowane za innymi, pozostałości prostokątów przycinających.

Metadane edytora. Otwórz wynik wektoryzacji w Inkscapie, zapisz go, a dodasz blok danych z przestrzenią nazw Inkscape, którego żadna przeglądarka nie czyta.

Style inline powtarzane w każdym elemencie. Pięćdziesiąt ścieżek, z których każda niesie te same deklaracje fill i stroke.

To krok, który nadaje sens całej reszcie, i zajmuje minutę.

Zanotuj dla oryginału trzy wartości: rozmiar pliku, liczbę węzłów (większość edytorów ją pokazuje albo policz pary współrzędnych w atrybutach d) i zrzut ekranu w rozmiarze, w jakim grafika będzie naprawdę używana. Potem zoptymalizuj, zanotuj te same trzy wartości i porównaj zrzuty obok siebie w tym samym rozmiarze.

Bez tego zgadujesz. Z tym widzisz różnicę między optymalizacją, która oszczędziła 80% i niczego nie zmieniła, a taką, która oszczędziła 85% i po cichu spłaszczyła twoje krzywe.

Uprość ścieżki. Zwykle to daje najwięcej. Upraszczanie ścieżek łączy zbędne węzły, utrzymując krzywą w ustawionej przez ciebie tolerancji. To, jak daleko można się posunąć, zależy wyłącznie od grafiki: wyrazisty geometryczny znak zniesie agresywne upraszczanie, szczegółowa ilustracja – nie. Zacznij ostrożnie, porównuj z referencyjnym zrzutem ekranu, zwiększaj, aż zobaczysz różnicę, a potem cofnij się o krok.

Zrób to już przy wektoryzacji, jeśli twoje narzędzie na to pozwala. Upraszczanie w trakcie wektoryzacji zwykle daje lepsze krzywe niż upraszczanie po fakcie, bo algorytm wciąż ma do dyspozycji oryginalne piksele.

Ogranicz precyzję dziesiętną. W SVGO to wartość, którą można skonfigurować. Dwa albo trzy miejsca po przecinku pasują do wielu ikon i logo w internecie, ale właściwa liczba zależy od skali współrzędnych i tego, jak drobne są szczegóły. To parametr do przetestowania, a nie reguła, i zwykle jeden z najtańszych dostępnych zysków.

Usuń metadane. Przestrzenie nazw edytora, komentarze, puste grupy, nieużywane definicje. Bezpieczne w pliku, który wysyłasz.

Usuń ukrytą geometrię. Kształty bez powierzchni, elementy z zerowym kryciem, wszystko, co całkowicie zasłania nieprzezroczysty kształt nad nim. Bezpieczne w kopii produkcyjnej. Pamiętaj, że w roboczym pliku głównym część z nich może być zamierzona.

Przenieś powtarzające się style do CSS. Jeśli wszystkie ścieżki mają to samo wypełnienie, jedna klasa wygrywa z pięćdziesięcioma atrybutami inline.

To ważniejsze niż jakiekolwiek pojedyncze ustawienie. Optymalizacja jest stratna i po nadpisaniu pliku nie ma odwrotu.

Trzymaj edytowalny plik główny – z warstwami, ukrytymi wariantami i nienaruszoną strukturą. Do internetu eksportuj zoptymalizowaną kopię. Kiedy projekt się zmienia, edytujesz plik główny i eksportujesz go ponownie, zamiast próbować rozgryźć zminifikowany plik.

SVGO to standard. Z wiersza poleceń, w kroku budowania albo przez interfejs webowy SVGOMG, jeśli chcesz włączać i wyłączać poszczególne optymalizacje i obserwować wynik.

Jedno ustawienie, na które trzeba uważać: removeViewBox usuwa atrybut, dzięki któremu SVG skaluje się responsywnie. Nie należy do domyślnego presetu SVGO, ale można je włączyć ręcznie, a inne narzędzia, które opakowują SVGO, mogą mieć to skonfigurowane inaczej. Jeśli SVG po przetworzeniu nagle przestaje poprawnie zmieniać rozmiar, sprawdź to w pierwszej kolejności.

Ustawienia wektoryzacji mają większe znaczenie niż jakakolwiek obróbka po fakcie. Wektoryzacja z odpowiednio ustawioną liczbą kolorów i poziomem szczegółowości daje plik, który wymaga niewielkiej optymalizacji. Wektoryzacja z maksymalną szczegółowością daje taki, którego żaden optymalizator w pełni nie uratuje.

Nadmierne uproszczenie to prawdziwy błąd i łatwo go przeoczyć na dużym ekranie.

Sprawdzaj w rozmiarze, w jakim grafika będzie używana. Logo optymalizowane w powiększeniu 400% może źle wyglądać przy 32 px w pasku nawigacji – i odwrotnie.

Uważaj na spłaszczone krzywe. Agresywne upraszczanie zamienia łagodne łuki w proste odcinki. Na kole widać to od razu; w literze objawia się jako subtelna nienaturalność, której nie da się od razu nazwać.

Patrz na narożniki. Ostre narożniki to często pierwsza rzecz, którą upraszczanie zaokrągla. Kwadrat, który zrobił się lekko miękki w rogach, oznacza, że to już za dużo.

Orientacyjnie, a nie jako progi: prosta ikona, która mieści się w kilku kilobajtach, i typowe logo w kilkunastu–kilkudziesięciu kilobajtach to rozsądne wyniki. Szczegółowe ilustracje ważą więcej i to w porządku.

Jeśli wynik jest daleko powyżej tego, co wydaje się rozsądne przy złożoności grafiki, poprawka zwykle leży wcześniej, a nie w optymalizatorze. Wektoryzuj z mniejszą liczbą kolorów, mniejszą szczegółowością albo uprość sam projekt.

Dostępność. SVG osadzony w kodzie, który niesie znaczenie, potrzebuje elementu <title>, a dekoracyjny – aria-hidden="true". Żadne z nich nic nie kosztuje i oba nagminnie się pomija. Optymalizatory ich nie dodadzą, a niektóre konfiguracje usuną dodany przez ciebie <title>, jeśli im tego nie zabronisz.

Tracer pozwala kontrolować wektoryzację przed eksportem, a to najtańsza optymalizacja, jaka istnieje. SVG za darmo.