SVG – nowe podejście do grafik na stronie www

W czasach, gdy na indeksowanie strony internetowej przez tajemnicze roboty Google’a duży wpływ ma szybkość ładowania się witryny, zmniejszenie objętości grafik na stronie to mus. Tylko jak to zrobić, nie tracąc przy tym na jakości? Z pomocą przychodzą nam SVG.

Czy da się odchudzić grafikę? Jasne, obniżę wagę pliku zmniejszając rozmiar, ale w końcu dochodzi się do stanu, gdzie graficzki są tyciutkie niczym znaczki pocztowe bądź tworzą efekt (niestety rzadko pożądany) tzw. pikselozy. Co to jest pikseloza? Brzmi trochę jak nazwa jakiegoś horroru i po części jest to prawda – jest to bowiem KOSZMAR GRAFIKA!

Grafika rastrowa inaczej zwana bitmapą to nic innego jak prostokątna siatka z odpowiednio pokolorowanymi pikselami, czyli punkcikami. Im bardziej powiększamy bitmapę, tym większe robią się punkciki i stają się coraz bardziej widoczne, a obraz coraz mniej wyraźny. Tak właśnie powstaje efekt pikselozy.

Ok, George Seurat pewnie by się ucieszył, widząc Wasze pikselozy (to ten koleś od puentylizmu, czyli nurtu neoimpresjonistycznego polegającego na nakładaniu farby czubkiem pędzla, tworząc kropki, które dopiero oglądane z pewnej odległości wyłaniały zarys obrazu), ale wątpliwe, że odwiedzający Waszą stronę będą Wam wdzięczni za tę lekcję historii sztuki.

Jeśli koniecznie musimy na naszej stronie umieścić fotki, dbajmy o to, aby były one zoptymalizowane do rozmiaru, jaki właściwie jest potrzebny, aby nie obciążać niepotrzebnie strony. A jeśli grafika, jakiej używacie na witrynie, nie jest typowym plikiem rastrowym, czyli takim, do którego zapisu potrzebujemy pikseli, a po ludzku mówiąc – nie jest zdjęciem tylko np. ikoną, z powodzeniem można zastąpić ją SVG.

Czym jest SVG

SVG to skrót od scalable vector graphic czyli skalowalna grafika wektorowa. Te trzy słowa doskonale wyjaśniają prostotę i potęgę tych małych, często nie przekraczających 4 kilobajtów, plików graficznych. A wiadomo, że to właśnie pliki graficzne najbardziej obciążają strony internetowe, powodując, że te ładują się długo.

No dobra, nadal brzmi to enigmatycznie. Bo ludzie spoza branży rzadko wiedzą, co to są wektory. Nie, to nie są krewni i znajomi Wiktora. Grafika wektorowa inaczej nazywana jest grafiką obiektową, gdyż obraz zapisywany jest za pomocą prostych obiektów geometrycznych, takich jak okręgi, krzywe, wielokąty i odcinki. Wcale się nie wymądrzam, tylko cytuję za Wikipedią.

To dlatego czasem graficy żargonowo proszą o pliki „na krzywych”. Bynajmniej nie chodzi o przekrzywioną wersję Waszego logo, ale o plik zapisany za pomocą obiektów nazywanych krzywymi, które mają swój punkt zaczepienia i węzły, które można dowolnie modyfikować.

Różnica między grafiką wektorową i rastrową

O co jednak ta afera, co to za różnica czy piksel czy krzywa? Otóż spieszę wyjaśnić. W pewnym momencie rzeczywiście może nie być ona dostrzegalna, ale gdybyśmy chcieli powiększyć obie grafiki, i to powiększyć diametralnie, nagle się okazuje, że różnica jest ogromna. Pamiętacie piksele, które po powiększeniu tworzą efekt pikselozy? Taka sytuacja nie zdarza się w sytuacji wektorów, gdzie nie ma żadnych kolorowych punkcików, są za to współrzędne punktów zahaczenia.

Grafika wektorowa posiada jeszcze tę zaletę nad bitmapą, że opisanie punktów zaczepienia i zapisanie ich w pliku zajmuje znacznie mniej miejsca niż w przypadku całej siatki pikseli, którą bitmapa musi zapisać. Wniosek – plik jest lżejszy i zajmuje mniej miejsca na dysku.

Oczywiście nikt nie mówi, że bitmapy są złe, bo jest to najlepszy sposób zapisu np. zdjęć. Chodzi jednak o to, aby wiedzieć, do czego służą różne formaty zapisu, aby móc je odpowiednio stosować.

Wektory i SVG

Skoro już wiemy czym są wektory, wróćmy zatem do SVG. Jeśli chcielibyśmy na stronie umieścić logotyp, ikony usług i jeszcze parę ilustracji wykonanych przy pomocy prostych geometrycznych kształtów, dlaczego nie zrobić tego właśnie w SVG? Jeden plik .png oparty na zapisie pikselowym ważący 740kB może zostać z powodzeniem zastąpiony plikiem SVG ważącym jedynie 12kB. Dodatkowo jest w pełni skalowalny i nigdy nie traci przy tym na jakości. I jeszcze można się bawić efektami takimi jak – po najechaniu myszką zmień kolor obiektu lub wykonaj jakąś animację – obróć, skaluj, zmień krycie obiektu. Brzmi jak czary? Trochę tak, bo wygląda to rzeczywiście magicznie.

I niby już to było, bo format .gif wykorzystywał animację zanim ja zaczęłam liceum. Pomyśl jednak o grafikach, które animują się tylko po najechaniu na nie myszką, a przestają, gdy wyjedziesz poza obiekt. Widziałeś takie cuda na naszej głównej (jak nie to szybko sprawdź). Czy Twój .gif to potrafi?

W jaki sposób umieścić SVG na stronie internetowej?

Ok, przekonałam Cię, SVG są fajne, ale nadal nie wiesz, jak je załadować na stronę. Już chyba prościej się nie da – mówią ci, którzy wiedzą jak to zrobić. A Ty głowisz się i rozkminiasz jak oni to zrobili? Skądinąd SVG został stworzony z myślą o www, dlaczego więc go nie używać. Skoro więc SVG jest formatem przeznaczonym na witryny internetowe, powinien mieć to, na czym bazuje każda witryna – mianowicie kod.

Tak, jedni widzą teraz przed oczami Neo z Matrixa, drudzy już uciekli w przerażeniu. Spokojnie, tak jak i Neo zobaczysz, że nie ma się czego bać i nie taki kod straszny jak go deweloperzy piszą. To mówię ja, która naprawdę o kodowaniu mogłaby powiedzieć tylko tyle, że nie bez powodu nazywa się to kod, który jest synonimem szyfru.

Na szczęście SVG oparte jest na prostym kodzie, który można szybko podejrzeć za pomocą Notatnika. Tak, Notatnika. Idąc dalej drogą dedukcji w Notatniku jest zwykły tekst. Zaraz, zaraz… w WordPressie też jest moduł, który się tak nazywa (chyba, że macie angielską wersję, to wtedy nazywa się Plain Text). Wystarczy skopiować tekst SVG z Notatnika i umieścić go w module Plain Text. Już wiesz jak umieszcza się SVG na witrynie. Prawda, że to wszystko jest bardzo proste?

Teraz, skoro już wiesz, możesz to zrobić sam. Chyba, że nie znasz się na grafice wektorowej i nie masz żadnych SVG do umieszczenia pod ręką. Albo chcesz wejść na wyższy poziom i umieścić SVG, które się animuje. Nie, to już nie jest aż takie proste, ale nadal wykonalne – my to robimy. Skontaktuj się z nami, a zanimujemy też Twoje SVG.

Rąbka tajemnicy uchyliła graficzka w uKONTENTowani Sp. z o.o. Joanna Ogińska.