Artykuły, Opinie i Wywiady
Leave a comment

Kilka słów o SVG

Czym jest SVG?

SVG lub Scalable Vector Graphics (Skalowalne wektorowe grafiki) jest XML’owym silnikiem pozwalającym na wyświetlanie grafik wektorowych
w Waszych przeglądarkach. Obsługiwany jest przez większość przeglądarek internetowych. Format ten pozwala na tworzenie animacji oraz wyświetlanie grafik, które nie tracą na jakości podczas skalowania. 

Format SVG umożliwia przeniesienie wektorów na ekran naszych przeglądarek. Nie wymaga to specjalistycznej wiedzy na temat kodowania, ponieważ grafiki możemy przygotować w popularnych edytorach graficznych takich jak Adobe Illustrator. Zapisany plik posiada kod na bazie XML, który możemy skopiować
na stronę i cieszyć się w pełni skalowalną grafiką wektorową bez dodatkowych wtyczek. Nie musimy się też przejmować dużym rozmiarem grafiki, gdyż jest ona zapisana w postaci tabeli współrzędnych poszczególnych punktów obiektu.

Zastosowanie SVG

Wyobraźmy sobie, że potrzebujesz ikony do responsywnej strony –
od starego smartfona po najwyższej klasy monitor 4K. Większość elementów przygotujemy w oparciu o CSS (tła, ramki oraz kroje pisma). Co natomiast
z elementami graficznymi, które powinny zmieniać się w zależności od rozdzielczości wyświetlacza? Jedną z możliwości jest przygotowanie dużych plików png. Rozwiązanie to ma 2 wady – stosunkowo duży rozmiar plików oraz rozmyte krawędzie po przekroczeniu nominalnej wielkości.

Tu z pomocą przychodzi format SVG. Przygotowane grafiki są zapisane za pomocą współrzędnych punktów, dlatego każda wywołana grafika dzięki silnikowi graficznemu naszej przeglądarki będzie ostra i czytelna. To nie jedyne zastosowanie tego formatu. Wykorzystuje się go do prezentacji map, maskowania plików wideo oraz animacji. Dzięki wykorzystaniu znaczników XML (działających jako baza danych o obiektach wektorowych), SVG pozwala na bardzo płynne
i proste do przygotowania sekwencje animacji.

Animacja SVG

Jeśli jesteś grafikiem to mamy dla Ciebie smutną wiadomość – musisz znać podstawy CSS, aby wykonać prostą animację SVG. Jeśli chcecie zrobić płynną skalowalną animację zbliżoną do SVG – polecamy program Edge Animate.

Programiści, którzy chcieliby zaanimować SVG powinni zainteresować się tym artykułem oraz tymi bibliotekami.

Czemu format SVG nie jest tak bardzo popularny?

Zwiększone zapotrzebowanie na nowe rozwiązania w zakresie responsywnych projektów sprawia, że SVG szybko zyskuje popularność. Nie jest on jednak równie popularny co CSS Canvas czy Flash (R.I.P.) ze względu na kompleksową budowę. Problem ten powoli znika ze względu na coraz większą liczbę narzędzi obsługujących ten format.

Największą wadą SVG jest pochłanianie zasobów – np. podczas dynamicznej zmiany wielkości obiektu w przeglądarce: Podczas renderowania zmieniającego wielkość obiektu SVG (o dużym skomplikowaniu) potrzeba sporej mocy obliczeniowej, co w przypadku starszych urządzeń mobilnych wiąże się
z widocznym „lagiem”.  

Gdzie zacząć?

Jeżeli ten artykuł Cię zainteresował, w Internecie znajdziesz olbrzymią ilość kursów, bibliotek oraz narzędzi do obsługi SVG. Oto kilka, które polecamy
dla początkujących:

Zbiór materiałów i skryptów wykorzystujących SVG

Tworzenie i optymalizacja plików SVG za pomocą Adobe Illustrator 

Kurs SVG od Microsoft

Diving Deep into SVG Animations

View story at Medium.com