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

Ruch na ekranie

Uruchomienie animacji. Moja obietnica z poprzedniego tygodnia, że oddam dwa wpisy wcześniej, a nie na ostatnią chwilę, właśnie staje się niespełnioną. Jest nawet gorzej. Nie pamiętam, kiedy oddawałem dwa wpisy w niedzielę. Obserwując inne wpisy na blogach mam wrażenie, że część uczestników konkursu już odpuściła. Część się tłumaczy nawałem pracy, przesileniem wiosennym, załamaniem nerwowym i takie tam. Ja taki nie będę i otwarcie przyznaję się że mi się nie chciało... To żart.
Dlatego dodaje dopiero ten wpis, bo uczyłem się GSAP, miałem trzy problemy, z którymi nie mogłem sobie poradzić, a o których za chwilę opowiem oraz oczywiście brak czasu.

Trochę dodałem tagów do HTML, przez co skróciłem kod CSS. Powiększył się również plik js, a postacie nareszcie się ruszają za pomocą GSAP. Możecie sprawdzić: https://guydiamond.github.io/where_is_my_letter/.

Pierwszym problemem objawił mi się na początku tygodnia był związany z css. Każdy div odpowiadający za miejsce do chowania się postaci, m…

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 pliku  HTML:
<script s…

Pora się pożegnać

Postanowienie z poprzedniego posta
Tak, to już ostatni dzień konkursu. Za nim zrobię podsumowanie całego projektu, wrócę do mojego poprzedniego wpisu. Narzekałem w nim, że wykryłem błąd. Myślałem, że szybko go naprawię i poprawię mój kod. Ten easy-peasy bug, zajął 3 dni! Przebudowywałem kod 3 razy. W końcu zwróciłem się z problemem na forum i dostałem podpowiedź, która pomogła mi rozwiązać problem. W tych dwóch krótkich  metodach miałem dwa bugi, które aktywowały się na przemian,  przez co zachowanie metod wyglądało na losowe.
Prawione metody w obiekcie Controller:
https://github.com/commitPrzez ten błąd, nie starczyło mi czasu na poprawę jakości kodu. Jednak jeszcze się nie poddaję. Jak znajdę dziś trochę czasu, to poprawię go i wyślę na githuba.

Podsumowanie
W czasie tego konkursu wypiłem 167 kaw, zużyłem ..., ale to Was pewnie nie interesuje.
Jeden z głównych warunków konkursu został spełniony. Ponad 20 postów zostało upublicznione. W utrzymaniu samodyscypliny przy pisaniu postów p…