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

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…

Werifikacja poprawności kodu

Jak sprawdzić, czy twój kod jest poprawny?
Dziś już oddałem jeden wpis, ale zaoszczędziłem trochę czasu i mogę napisać kolejny. Jest u mnie 22 i może zdążę do północy.
Gdy jesteś początkującym koderem (takim jak ja), chciałbyś wiedzieć, czy twój kod jest poprawny i pisany zgodnie z obowiązującymi standardami. Jednym ze sposobów jest publikacja kodu na forum programistycznym. Kilka razy tak zrobiłem i dostałem treściwą odpowiedź, ale zdarzały się sytuacje, gdy nikt nie odpowiadał. Wtedy zastanawiałem się, czy mój kod jest tak zły, że fachowcy nie mają już siły dopowiadać na te same błędy, czy taki dobry, że nie ma do czego się doczepić. 😉
To niesie także ryzyko, że kod zostanie sprawdzony powierzchownie i o wielu błędach się nie dowiesz. Może się też zdarzyć, że wywiąże się dyskusja pomiędzy kilkoma mistrzami, o tym, jak powinien wyglądać poprawny kod. Po takiej dyskusji zazwyczaj jesteś bardziej skołowany niż przed zadaniem pytania.
Czasami po prostu głupio pytać kolejny raz o spraw…

Program do organizacji pracy

Nawiązując do poprzedniego postu, w którym przedstawiłem plan działania, chciałbym wam pokazać program do zarządzania listą zadań.

Do tej pory chwilę używałem strony Trello. Trello posiada wszystko, co powinien mieć program "to do list". Jeżeli do tej pory nie używałeś żadnego, to wymienię czym powinieneś się kierować przy wyborze dobrego menadżera zadań. Nie będę tutaj wymieniał oczywistości, takich jak dodawanie zadań z datą.

Menadżer zadań powinien posiadać: 
dostęp z przeglądarki,aplikację na urządzenia przenośne,możliwość pracy w grupie,system powiadomień o nadchodzących "deadlines" oraz zmianach na liście,  opcje kopiowania list, zadań - przydatne, kiedy co tydzień powtarzasz te same zadania,możliwość dodawania komentarzy ludzi biorących udział w zadaniach,dodawanie załączników, zdjęć i innych plików multimedialnych,tworzenie podzadań, chcecklist  lub listy zakupów (funkcjonalność podobna),oznaczanie ważnych zadań, Dobrze, gdyby posiadał także:
chat,przydziela…