Jak już zauważył Wrzlprmft, ponad 50% rozmiaru pliku SVG jest pobierane przez osadzony bitmapowy obraz PNG, który jest używany do tworzenia raczej subtelnego efektu cieniowania na kontrolerze. Wystarczy pozbyć się tego obrazu i zastąpić go prostym gradientem radialnym, aby zmniejszyć SVG do około 10 KB.

Oryginalny obraz z fantazyjnym kreskowaniem po lewej stronie, wersja edytowana z prostym gradientem radialnym po prawej stronie.

Podczas wykonywania tej czynności powinieneś również sprawdzić swoje ścieżki, aby sprawdzić, czy istnieje coś, co można tam uprościć. Nie znalazłem wiele, ale kontur kontrolera ma kilka sąsiednich węzłów (w pobliżu górnej i dolnej środkowej części), które można łączyć bez widocznej różnicy.

To oszczędność 50%, ale nie zatrzymujmy się jeszcze. Jeśli wiesz trochę o Format SVG Możesz to zrobić znacznie lepiej.

Najpierw uruchom „Vacuum Defs” w Inkscape, aby pozbyć się zbędnych definicji, a następnie zapisz obraz jako „zwykły SVG”. Teraz nadszedł czas, aby otworzyć go w edytorze tekstu i zobaczyć, czego możemy się pozbyć. Najlepiej byłoby, gdybyś użył edytora z wbudowanym podglądem SVG, abyś mógł szybko zobaczyć, jak Twoje zmiany (miejmy nadzieję, że nie) wpłyną na wygląd obrazu. Używam do tego emacs ale jest inne edytory o podobnych funkcjach .

W każdym przypadku, gdy plik SVG jest otwarty w edytorze tekstu, zacznijmy go upraszczać!

• W prawym górnym rogu znajduje się duży bezużyteczny <! - komentarz ->. Po prostu go usuń.

• Jeśli edytujesz SVG bezpośrednio z Illustratora, jest też niepotrzebna linia <! DOCTYPE ...>. Usuń go też.

• Inkscape nalega na wstawienie niepotrzebnego bloku metadanych RDF do obrazu. Po prostu znajdź <metadata ...> i usuń go wraz ze wszystkim przed i łącznie z zamknięciem </ metadanych>.

• Ponadto, nawet jeśli plik zostanie zapisany jako „zwykły SVG”, Inkscape nadal będzie go blokował wieloma atrybutami użytkownika. Znajdź wszystkie atrybuty zaczynające się od inkscape: lub sodipodi: i usuń je.

• Po usunięciu metadanych i atrybutów specyficznych dla Inkscape można usunąć wszystkie nieużywane atrybuty przestrzeni nazw XML z <svg>. Powinno być bezpiecznie usunąć co najmniej xmlns: rdf, xmlns: dc, xmlns: cc, xmlns: inkscape i xmlns: sodipodi. Jeśli istnieje zbędny atrybut xmlns: svg, również go usuń. Jedyne atrybuty przestrzeni nazw, które powinieneś zostawić na teraz:

  xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink"

• Znacznik <svg> ma również wiele innych niepotrzebnych atrybutów, które można bezpiecznie usunąć, takich jak włącz tło i xml: space = „zachowaj”. (Są one wstawiane przez eksportera SVG programu Illustrator, a Inkscape nie jest wystarczająco inteligentny, aby zrozumieć, że są bezużyteczne). Pole viewBox można również bezpiecznie usunąć z tego obrazu, ponieważ po prostu powtarza atrybuty x, y, width i height.

• Możesz także bezpiecznie usunąć atrybuty kodowania i samodzielny z <? xml ...?>.

• Teraz spójrzmy na dane obrazu. Z jakiegoś powodu Inkscape nalega na przypisywanie atrybutów id do każdego elementu, nawet jeśli nigdy się do nich nie odwołują. Dowolny atrybut id, którego wartość nigdy nie powtarza się nigdzie indziej w pliku (szukaj go!) Można bezpiecznie usunąć. W rzeczywistości jedynymi identyfikatorami, które należy zachować, są identyfikatory dla gradientów i ewentualnie dla innych obiektów (na przykład ścieżek) znalezionych w <defs>.

• Ponadto Inkscape lubi generować długie identyfikatory, takie jak linearGradient4277. Zastanów się nad zmniejszeniem wszelkich identyfikatorów, których nie możesz po prostu usunąć w krótkiej wersji, np. Lg1.

• Istnieje również kilka sekcji <defs> za sobą. Łączenie ich zapisuje kilka bajtów (i upraszcza strukturę dokumentu jako całości).

• Na końcu pliku znajdują się także puste grupy (elementy <g>). Pozbądź się ich. Może również istnieć kilka kolejnych grup z tym samym atrybutem transformacji (lub w ogóle nikogo); bezpieczne jest także ich łączenie.

• Z jakiegoś dziwnego powodu Inkscape zachowuje zbędną ścieżkę Beziera (atrybut d) dla elementów <circle>. Zajmuje miejsce bez powodu, więc po prostu je usuń. (Pozostaw d atrybutów w elementach <path>; są one rzeczywiście używane do czegoś.)

• Inkscape lubi także używać CSS w atrybutach stylów, gdzie bardziej specyficzne atrybuty będą krótsze, na przykład przepisać fill = "# 4888fa" na bardziej szczegółowy styl = "fill: # 4888fa". Możesz zapisać kilka bajtów, przerywając te style na osobne atrybuty (i usuwając te, które po prostu niepotrzebnie powtarzają ustawienia domyślne), ale które są nieco bardziej zaznajomione z formatem SVG niż większość zmian opisanych powyżej.

• Dodatkowo, jeśli są jakieś elementy <use ...>, możesz zapisać kilka bajtów, zastępując je rzeczywistym elementem, do którego się odnoszą. (Oczywiście, oszczędza to miejsce tylko wtedy, gdy powiązane elementy są używane tylko raz.) Wydaje się również, że Inkscape lubi pośrednio definiować gradienty kołowe, najpierw definiuje zatrzymania w <linearGradient>, a następnie odwołuje się do nich w <radialGradient>; Możesz to uprościć, przesuwając przystanki bezpośrednio do gradientu radialnego i pozbywając się nieużywanego gradientu liniowego. Jako bonus, jeśli po wykonaniu tego, udało ci się pozbyć wszystkich xlink: href, możesz usunąć atrybut xmlns: xlink z <svg>.

• Jeśli naprawdę chcesz wycisnąć każdy dodatkowy bajt, znajdź wartości liczbowe ze zbyt dużą liczbą miejsc dziesiętnych i zaokrąglij je do czegoś bardziej rozsądnego. Tutaj podgląd w czasie rzeczywistym naprawdę pomaga, ponieważ pozwala zobaczyć, ile możesz zaokrąglić wartość, zanim stanie się widoczna. Nawet jeśli nie chcesz dokładnie sprawdzać każdego numeru, aby zobaczyć, jak można go zaokrąglić, możesz przynajmniej wybrać nisko wiszące owoce, na przykład zaokrąglając wartość 1,0000859 pikseli do 1.

• Na koniec usuń wcięcia i spacje w pliku. Aby zminimalizować liczbę bajtów, musisz umieścić wszystko w jednej linii (lub przynajmniej wstawić podziały wierszy przed atrybutami, gdzie i tak jest wymagane miejsce), ale naprawdę trudno jest to odczytać. Jednak przyzwoitą równowagę między czytelnością i zwartością można uzyskać za pomocą prostego, konserwatywnego wcięcia.

W każdym razie udało mi się edytować ręcznie w obrazie SVG:

Ten obraz SVG wygląda prawie nie do odróżnienia od drugiego przykładu powyżej i zajmuje tylko 5189 bajtów, czyli znacznie mniej niż obraz JPEG. Jestem pewien, że można go jeszcze zoptymalizować, ale to tylko przykład tego, co można zrobić w ciągu kilku minut w praktyce. (Wybieranie tej odpowiedzi zajęło mi znacznie więcej czasu niż rzeczywista edycja kodu SVG).

Wreszcie, skompresowanie tego kodu SVG za pomocą gzip zmniejsza go do 1846 bajtów (!), Co stanowi ponad jedną czwartą rozmiaru twojej wersji JPEG.