Odchudzanie SVG

Nie wiem jak ci to powiedzieć, ale musisz schudnąć

Narysowałem kolejny element do gry. Najbardziej złożony rysunek dotychczas. Po zapisaniu na go na dysk, trochę się zdziwiłem, bo zajmował on aż 1952KB. Kilka słoneczników a zajmują więcej niż wszystkie rysunki, jakie narysowałem do gry razem.

Rodzice z mobilnym limitowanym internetem, nie będą szczęśliwi, pożyczając swoim dzieciom telefon do gry. Musimy cię odchudzić, mój słoneczniku.

Zapis w Inkscape

Gdy zamierzasz pracować na Inkscape powinieneś wiedzieć, że w odróżnieniu od innych programów do tworzenia grafiki wektorowej, Inkscape nie ma swojego formatu plików. Ilustrator ma końcówkę plików .ai, Affinity Designer ma .afdesing itp. Inkscape używa końcówki .svg, ale ma dwa typy.

Zapis w "Czysty format SVG" sprawia, że utracimy warstwy i rysunek zostanie spłaszczony do jednej warstwy, ale za to zaoszczędzimy trochę KB. Dlatego robocze prace zapisujemy w "Inkscape SVG", a do umieszczenia na stronie w czystym formacie SVG. Gdybym zapisał moje słoneczniki w "Inkscape SVG", plik maiłby ponad 2100 KB. 

SVG Cleaner

Pomimo zapisu w  czystym formacie SVG, programy i tak dodają swoje ustawienia do kodu, które dla nas niekoniecznie są potrzebne. Istnieją dodatkowe programy do czyszczenia ze zbędnych wpisów w kodzie. Po wpisaniu w Google frazy "SVG cleaner" wyskoczy wam lista programów do odchudzania plików wektorowych. Niektóre z nich są nawet online. Nie będę ich tutaj teraz porównywał, tylko opiszę ten, którego używam i jestem z niego zadowolony. Program się nazywa ... "SVG Cleaner"! Prawda, że oryginalnie? 

Program jest lekki i łatwy w użyciu. Dużą zaletą tego programu jest wybranie katalogu i wyczyszczenie plików hurtowo. 

Bardzo mi się podoba rozwiązanie wyboru opcji czyszczenia. Gdy najedziemy myszką na jakąś opcje, wyskoczy okno z przykładowym użyciem tej opcji oraz informacją o zaoszczędzonych bitach.

Po wyczyszczeniu mojego pliku ze słonecznikami zwolniło się ok 63% miejsca. Plik waży 718KB, całkiem nieźle.

Inne sposoby na odchudzanie

Powiedzmy, że ta waga nadal jest dla mnie za duża. Czy istnieje inna dieta cud? Żeby takim jednym kliknięciem stracić jeszcze trochę wagi. Ja takiej nie znam. Gdy się rysowało bez opamiętania, to teraz trzeba dołożyć trochę wysiłku, żeby ciężar zrzucić. Powiem szczerze, że do tej pory jeszcze tego nie robiłem i o tym nie czytałem. Będę to robił "na żywo" i opisywał tutaj wyniki. Jeżeli mi się nie uda, to po prostu usunę ten rozdział i post się skończy na rozdziale "SVG Cleaner". Jednak gdy to czytasz, to znaczy, że udało mi się coś osiągnąć 😉

Nie przesadzę, gdy napiszę, że mój obrazek składa się ze setek ścieżek i obiektów. Poprawianie wszystkiego na raz zajmie dużo czasu, a efekty mogą okazać się marne. Dlatego wybiorę jednego słonecznika i na nim będę eksperymentował. Pomoże mi to lepiej kontrolować zachodzące zmiany.

Początkowa waga: 100KB.

Zaczniemy od opcji Inkscape -Ścieżka > Uprość (ang. simplify), która redukuje ilość węzłów, starając się zachować kształt. Po trzykrotnym zastosowaniu upraszczania, plik zmniejszył się do 84KB. To już coś, ale gdy przyjrzymy się bliżej, w głowie słonecznika pojawiło się kilka białych dziur. Liście też nieznacznie zmieniły kształt.

Teraz sprawdzimy sumowanie kształtów Ścieżka > Suma (ang. union). Użycie tego narzędzia spowoduje przekształcenie na zarys kwiatka o jednolitym kolorze. Dlatego rozgrupowuję słonecznik i połączę podobne obiekty np. jasne płatki razem, ciemne razem itp. Zamiast kilku obiektów podobnie wyglądających, będzie jeden, a za tym mniej danych do wpisania w kodzie SVG.
Wynik 85 KB. Całkiem nieźle, ale sprawdźmy jak wygląda rysunek.

Przyjrzyjcie się jasnym płatkom. Przy sumowaniu straciły one swoje gradienty (każdy płatek miał swój) i zastąpione zostały jasnożółtym kolorem. Do utworzonego z płatków nowego kształtu, próbowałem dodać okrągły gradient, ale efekt różni się od pierwowzoru.

Możliwe, że będę musiał iść na kompromis i zrezygnować z niektórych efektów na rzecz mniejszego pliku. Spróbuję jeszcze użyć tych metod tam, gdzie się na to lepiej nadają. Np. sumowanie do jednolitych kolorów np. pomarańczowe płatki, a do żółto-pomarańczowych uproszczenie.

 

Wynik ponownie 85KB, ale teraz jest to najbliższe oryginałowi.

Czy gra warta świeczki? Sami osądźcie. Mam za to nauczkę na przyszłość. Jeżeli mam je używać skomplikowanych rysunków wektorowych w internecie, to  powinienem optymalizować je na początkowym etapie. Teraz mam kupę zabawy z rozdzielaniem grup i łączeniem tego z powrotem.

  

Pierwszy rysunek przed optymalizacją, drugi po. Wielkiej różnicy w wyglądzie nie ma.
A rozmiar to 1831KB. Zysk miejsca to 121KB. To bardzo niewiele. Liczyłem, że skoro mam 10 słoneczników a na każdym zyskam 85KB to będę miał przynajmniej 850KB. Widocznie Inkscape jest na tyle inteligentny, że optymalizuje powtarzające się części rysunku.

Przepuszczę jeszcze przez SVG Cleaner i zostało 480KB. Po wyczyszczeniu pierwotnego rysunku było 718KB. Teraz widać różnicę.

Co prawda 718KB może się wydawać niewiele dla obiektu w grze, ale pamiętajmy, że gra będzie online. Może być uruchomiana na urządzeniach mobilnych. Nie chcę, aby dzieci obrywały od rodziców za to, że wykorzystały miesięczny limit internetu na jedną grę. 😁