No cóż, mój własny niedawny entuzjazm do SVG nieco opadł gdy obejrzałem efekty działań innych entuzjastów SVG w polskiej wikipedii. Chodzi konkretnie o różne mapki z zaznaczonymi polskimi województwami, bo na tym się niechcący skupiłem. Myślałem, że w SVG da się robić małe pliki, mniejsze nawet niż GIF-y. Może tak, ale co z tego, prościej jest robić duże, byle gówniana mapka i już 130 KB albo nawet 300 KB.
Spróbowałem sam i garść spostrzeżeń mam. Może nie całą garść, raczej parę (czyli dwa). Pierwsze odkrycie jest zasługą genialnego programu do trasowania, potrace. Otóż w wypluwanych przez potrace SVG ścieżki opisane są liczbami całkowitymi, a dopiero potem całość wielokrotnie zmniejszona. Tym prostym sposobem oszczędza się sporo kropek przy opisie ścieżek, a przecież każda kropka to jeden bajt! Drugie to już sam odkryłem, trudno jest do pokolorowania mapy dobrać nazwane kolory podobnej jasności — ale przecież każdy na białym tle można rozjaśnić ustawiając ułamkową nieprzejrzystość (np. opacity=".7").
Poniżej mój wyrób, zacząłem od flashowej mapki "wydrukowanej" do PDF-a, którego zaraz otworzyłem w Inkscape. Zostawiłem tylko zarysy województw, zalałem je na czarno i zapisałem jako sporą bitmapę w postaci BMP (1000x1000). Którą potem strasowałem potrace do SVG (za pierwszym razem urwało Hel, ale wystarczy pogrubić) i ręcznie (tzn. w edytorze tekstu) pokolorowałem. Czemu tak? A czemu nie? Efekt nie jest zły, poza jednym paskudnym zadziorem na granicy lubelskiego z mazowieckim wszystko dość sensownie zaokrąglone. No i plik ma niecałe 30 KB. Jak ktoś chce niech sobie wytnie ze źródła strony, od <svg> do </svg>. Dwa razy większą mapkę można zrobić zamieniając wszystkie cztery 500 w nagłówku na 1000 i zmieniając skalowanie "warstwy" z województwami z transform="scale(.05)" na transform="scale(.1)" i jednocześnie skalowanie "warstwy" z podpisami ze scale(1) na scale(2) — czyli pomnożyć dwa razy tam gdzie trzeba. Itd. Podpisy najprościej umieszczać w SVG-edit, Inkscape mnie przytłacza, a włącza się tak powoli, że zapominam co chciałem zrobić.
piątek, 31 sierpnia 2012, 00:30
Subskrybuj:
Komentarze do posta (Atom)
13 komentarzy:
A w moim IE9 dalej nic nie widzę. Oczywiście tryb kompatybilny jest wyłączony.
Hm, rzeczywiście coś popsute, na drugim kompie działa. Tylko co popsute i jak to naprawić?
A tam nie ma opcji resetowania wszystkich ustawień do defaultowych? Bo normalnie IE9 powinno pokazywać SVG.
O tu jest opisane:
Reset Internet Explorer 9 settings
Nic z tego, dalej nie pokazuje. I teraz muszę sobie poprzywracać ustawienia które zresetowałem :-)
Mogę Ci tylko współczuć, bo to chyba nie całkiem trywialny problem. A IE9 sam używam na 64 bitowych Windows, więc nie będę głupio radził, że Chrome albo Firefox lepszy.
Kilka uwag.
SVG w wiki są wielkie i owszem, ale wynika to (z pobieżnej analizy na przykładzie 300KB mapki) z czynników takich chociażby jak to, że wszystko rysowane jest w Inkscape i najprawdopodobniej zapisywane jako "Inkscape SVG". Po zapisaniu mapki w tymże inkscape jako "Clean SVG" wielkość pliku ścięła się o ok 100KB. Dalejże: we wzmiankowanej mapce na wiki wszystkie teksty są zamienione w krzywe, co dodatkowo powiększa plik (u Ciebie podpisy to tekst). Po zdjęciu obrysów w inkscape, wywaleniu napisów i zapisaniu jako "czysty" SVG oryginalną mapkę ściąłem do ok. 60KB. Gdyby chcieć ręcznie dłubnąć i powywalać z pliku niektóre rzeczy, pewnie dałoby się ściąć go jeszcze bardziej. Więc to przede wszystkim kwestia narzędzia i umiejętnego jego wykorzystania. A z tym ostatnim u wikipedystów różnie.
A odnośnie IE, nie wiem czy nie jest potrzebna wtyczka Adobe SVG Viewer.
Jeszcze odnośnie mapki 130KB - trzeba zwrócić uwagę, że autor dość szczegółowo odwzorował granice województw. Wręcz zbyt szczegółowo, skoro krzywa wyznaczająca mazowieckie ma ponad 700 węzłów (najmniejsze województwo ma ok 300). I znowu plik puchnie.
Tak jest, szkoda więc że Inkscape od razu nie zapisuje maksymalnie małych plików, bo po cholerę komu takie wielkie? Natomiast prosty patent z użyciem wyłącznie liczb całkowitych w ścieżkach i skalowaniem jest chyba poza zakresem optymalizacji Inkscape?
Nie robić napisów tekstem w SVG to grzech i głupota. To już nawet nie chodzi o to że mniejsze pliki, tekst można łatwo znaleźć, poprawić, Google indeksują, same zalety.
W instrukcji użycia potrace są cenne uwagi na temat przygotowania bitmap do trasowania i ja z nich skorzystałem. A moduł z potrace jest chyba wykorzystywany do trasowania także w Inkscape. Szkoda że ludzie robią zanim się nauczą, a jak już zrobią to myślą że umieją.
Do IE9 nie jest już w końcu potrzebna wtyczka Adobe.
Zasadniczo w przypadku Inkscape'a może chodzić o kwestie filozofii samego programu. Inkscape zasadniczo ma być odpowiednikiem Corel Draw i Illustratora, czyli programy do rysowania wektorów raczej niż do produkowania embedowalnych elementów www, a co za tym idzie i mniejsze przywiązanie do optymalności kodu produkowanego przez sam program. A szkoda, bo SVG w moim odczuciu mógłby powalczyć o pozycję z flashem, szczególnie, że da się go również animować (nie próbowałem, ale się ciągle przymierzam). Odnośnie jeszcze możliwości obcinania kodu, SVG daje się stylować przy użyciu CSS, więc znowu pisząc stronę można z kodu wywalić parę elemenów do oddzielnych plików.
Szanse na wyparcie Flasha widzę raczej w nieustępliwej polityce Apple, natomiast czy upierdliwe animacje flashowe zostaną zastąpione przez równie upierdliwe animacje innego rodzaju - to jest mi chyba wszystko jedno. SVG jest dobre, proste w użyciu i łatwo reutylizowalne. Tylko co z tego, jeśli nikt nie używa (albo używa źle i robi antyreklamę). Microsoft zdaje się na początku 2014 kończy wreszcie z Windows XP (nie ma IE9 na XP, a IE8 nie czyta SVG!) i dopiero wtedy będzie można założyć, że SVG już widać w każdej przeglądarce. Tymczasem to tylko zabawka (ale fajna).
Skoro idziemy w minimalizm, to widzę że pozostało jakieś straszne bajotrawstwo -
Jest opacity="0.75" a mogło by być opacity=".75" jest scale(0.05,0.05) a mogło by być scale(.05,.05) nie mówiąc już o zdefiniowaniu stylu css dla napisów, zamist powtarzać text-anchor="middle" font-family="Sans-serif" font-size="14"
Dzięki, faktycznie, po zastosowaniu Twoich rad zmniejszyło się z 25603 do 24582 czyli aż 1021 bajtów. Można by jeszcze wyrzucić idy, ale to byłoby z dużym uszczerbkiem dla reutylizowalności.
Prześlij komentarz