Format SVG na stronie – dlaczego warto?
3 min
3 min
Na skróty
O tym, jak Twoją stronę będą postrzegać użytkownicy, w dużej mierze zadecyduje jej warstwa wizualna — w tym składające się na nią grafiki. Wyzwaniem może być jednak znalezienie kompromisu pomiędzy rozdzielczością grafik, ich skalowalnością oraz wagą samych plików, które mogą poważnie spowolnić działanie strony. W dzisiejszym wpisie przedstawimy najskuteczniejsze (do tej pory) rozwiązanie tego problemu — format SVG.
Zacznijmy od wyjaśnienia, czym różnią się obrazy rastrowe od wektorowych — jest to niezbędne, aby zrozumieć charakterystykę i zalety formatu SVG.
Z pewnością dobrze znasz formaty plików takie jak PNG i JPG — zdecydowanie najczęściej wykorzystywane na stronach WWW. Są to formaty grafiki rastrowej, opartej na siatce odpowiednio kolorowanych pikseli, tworzących razem na ekranie obraz. Generalnie, pozwalają one uzyskać bardzo ostre grafiki o dużych rozdzielczościach — problem pojawia się dopiero wtedy, gdy próbujemy zwiększyć skalę obrazu (możemy wtedy dostrzec pojedyncze piksele) lub ją zmniejszyć (co sprawia, że obraz staje się mniej wyraźny).
Grafika wektorowa z pikseli nie korzysta — jej obrazy są budowane z pomocą obiektów matematycznych: linii, figur i brył geometrycznych umiejscowionych w układzie współrzędnych. To sprawia, że obrazy wektorowe można dowolnie rozszerzać lub pomniejszać bez utraty rozdzielczości — a więc i jakości.
Zdj 1. Grafiki wektorowe świetnie radzą sobie ze skalowaniem – rastrowe, niekoniecznie.
Źródło: A Bit About SVG – Sparkbox
SVG (Scalable Vector Graphics) jest właśnie formatem grafiki wektorowej. Zamiast pikseli, korzysta on z języka XML (rozszerzalnego języka znaczników) do określania struktury obrazu. Języka, dodajmy, z łatwością rozpoznawanego przez przeglądarki internetowe. Oprócz wspomnianych już obiektów geometrycznych, do opisu grafiki można wykorzystywać także elementy tekstowe, co ma swoje znaczenie dla SEO (więcej o tym za moment).
Format SVG pozwala także na użycie języka JavaScript oraz arkuszy stylów CSS do manipulacji właściwościami obrazu — wdrażania interaktywnych skryptów czy animacji elementów graficznych.
Dzięki tak szerokim możliwościom ingerencji we właściwości obrazu format SVG doskonale sprawdza się przy budowie dynamicznych i responsywnych interfejsów, logotypów, elementów animowanych oraz wszystkich rodzajów grafik, które muszą zachować wysoką jakość niezależnie od tego, czy są wyświetlane na ekranie monitora, czy smartfona.
Poza wspomnianymi już funkcjonalnościami format SVG ma wiele innych, bardzo istotnych między innymi z perspektywy działań SXO, zalet. Poniżej omawiamy najważniejsze z nich — te, które sprawiają, że większość web developerów wdraża w swoich projektach właśnie grafiki wektorowe.
Zawodowy copywriter oraz student psychologii na Uniwersytecie Warszawskim. W świecie marketingu internetowego równie mocno, co chwytliwe (i wartościowe) treści interesuje go dobry design. Gdy nie zajmuje się tworzeniem contentu, odkrywa perełki kina niezależnego i pracuje nad własnymi opowiadaniami.
