Przejdź do głównej zawartości

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ę. 😁


Komentarze

Popularne posty z tego bloga

Animacja w tle

Pierwsze próby animacji SVG W poprzednim poście przedstawiłem wam tło do gry. Może wrzucę rysunek jeszcze raz. Całość jest zrobiona wektorowo i ustawiona w CSS jako background body. To teraz dodaję animację chmur i słońca. Chwilę googlowania i... zaraz, zaraz, jak to nie można animować elementy SVG w background? Oczywiście, że nie! Przecież miałem już podobny problem. Opowiem Wam o tym. Nie wiem, czy wam się już chwaliłem, ale jedna z moich postaci już rusza ręką. Macha sobie radośnie, ale żeby to robiła, to ja straciłem dla niej dużo czasu. Pewnie jak większość wie, plik SVG może składać się z figur geometrycznych, ścieżek, które mogą posiadać  swój id. Można też dodać im klasy. Po umieszczeniu SVG w HTML, można nim manipulować CSS lub JavaScriptem, podobnie jak np. divem, img, tekstem. A przynajmniej tak mi się wydawało. W pierwszych podejściach do animacji z pomocą GSAP, ustawiłem moją postać w tagu img. Na nic się nie zdała próba animacji jakiejkolwiek części ciała

GSAP - framework Javascript

GSAP, ależ to dobre jest   Im dłużej siedzę nad tą grą, tym częściej jestem miło zaskakiwany. Chociaż nie od razu jest przyjemnie, zwłaszcza jak się ma bardziej skomplikowane problemy do rozwiązania (jak dla mnie). Do tej pory nie stosowałem żadnych frameworków i prostą animację chciałem zrobić w CSS. W miarę czytania o GASP (GreenSock Animation Platform) i jego testowania, zrezygnowałem z jakiejkolwiek animacji w CSS. Czym jest GSAP? Jest to zbiór narzędzi do tworzenia animacji w JS. https://greensock.com/gsap Obsługuje podstawowe funkcje animacji, takich jak ruch w dowolnym kierunku, czas trwania, zmiana koloru, przeźroczystości, skalowania, obracania obiektu. Na tym jednak się nie kończy. Można manipulować opóźnieniem animacji, krzywą prędkości https://greensock.com/ease-visualizer ,wykonywać przekształcenia 3D. Animacje mogą nachodzić na siebie lub występować jedna po drugiej. Jest też sporo wtyczek z zaawansowanymi funkcjami. Użycie Wystarczy wkleić link do pli

Grafika na tło

Wektorowe tło Dziś krótki wpis, ale przedstawiający wynik paru godzin dłubania w Affinity Designer. Wszystkie rysunki wykonałem sam. Nie oznacza to, że nie wzorowałem się na rysunkach doświadczonych grafików, ale nie było żadnego kopiuj, wklej. Trochę czasu też straciłem na oglądaniu YouTube z tutorialami.    Elementy nieba: chmury i słońce, są wzorowane na rysunkach mojej córki.   Myślę, że jak na amatora to nie mam czego się wstydzić.  W tym tygodniu również testowałem animację ręki postaci. Po wielu próbach w końcu udało mi się. Moje zmagania opiszę w osobnym wpisie. Na przyszły tydzień szykuję wprowadzenie animacji słońca i chmur w tle oraz dodanie nowych graficznych elementów. Będą do miejsca do chowania się postaci. Na razie nie mam pomysłu, co to może być na łące? Może stóg siana, traktor i ... zobaczymy. Zapytam córki.