Na pewno spotkałeś się z formatem plików .SVG, a jeśli jeszcze nie wiesz czym on dokładnie jest i dlaczego warto go stosować, to dobrze trafiłeś.
Najpopularniejsze dwa typy grafik, które spotkamy w Internecie to oczywiście wciąż .JPG oraz .PNG. Oba formaty są już dosyć stare (jak na światek technologii) i mają swoje poważne mankamenty. Największym jest oczywiście sam proces kompresji, który jest albo bardzo stratny na jakości, albo ubogi w kwestii zmniejszenia wielkości pliku. Przez te wszystkie wyzwania, przy obróbce grafik trzeba iść na kompromis, a niekiedy jest to wręcz niemożliwe, np. wtedy gdy rozmiar grafiki musi być duży. I właśnie tutaj na ratunek przychodzi SVG…
Czym jest SVG?
SVG – z angielskiego Scalable Vector Graphics, a więc wektorowy (bezstratny) format grafiki dwuwymiarowej. Co istotne, nieograniczony żadnymi licencjami czy patentami.
Responsywność i ostrość!
SVG dzięki swojej „wektorowości” daje nam ogromne możliwości przy webdesignie stron internetowych. Taką grafikę, możemy rozszerzyć w dowolnie wielki rozmiar, a to wszystko przy zachowaniu niezmienionej wagi pliku!
Co niemniej ważne – obraz jest maksymalnie ostry na każdym urządzeniu: telefonie, tablecie, komputerze etc. Niezależnie od tego, czy używamy Windowsa, czy też MacOS – wszędzie uzyskamy piękny, ostry obraz, ograniczony jedynie możliwościami wyświetlacza.
Pliki graficzne, które można animować
Kolejną ciekawą funkcjonalnością plików SVG jest możliwość animacji. Dzięki temu bezstratnemu formatowi możemy upiększyć naszą stronę dodając niezwykłe animacje ikon, grafik. Efekty takie uzyskamy za pomocą CSS, interfejsu API w Javescript lub za pomocą tagu SVG „<animate>”.
Zmiana koloru grafiki za pomocą CSS? Z SVG to możliwe!
Kaskadowy arkusz styli, czyli potocznie CSS daje nam ogromne możliwości przy projektowaniu i stylowaniu stron internetowych. Dziś każda strona oparta jest o CSS. Czy pliki SVG lubią się z CSS? Jak najbardziej! Za pomocą kodu CSS bez większych problemów podmienimy kolory danej ikony, czy też dodamy efekt, który ma pojawić się po najechaniu na grafikę.
SVG a pozycjonowanie w Google (SEO)
Optymalizacja oraz pozycjonowanie witryn to klucz do sukcesu praktycznie każdej strony internetowej. Od tego jak wysoko pokazywana będzie witryna, zależy jej być albo nie być. Pliki SVG bardzo lubią się z Google. Dlaczego? Przede wszystkim z uwagi na niezwykle mały rozmiar. Google bierze pod uwagę prędkość ładowania się stron internetowych, w szczególnie na urządzeniach mobilnych. Jeśli zastosujesz pliki SVG, zamiast plików PNG, to wydatnie zmniejszysz rozmiar witryny i tym samym pozytywnie wpłyniesz na jej postrzeganie przez Google
Możliwości SVG kiedyś, dziś i w przyszłości
Zastosowanie SVG ewoluuje od kilku lat. Parę lat temu korzystało się z tego formatu głównie do wstawienia logo w krzywych. Dzięki temu można było uzyskać niespotykaną wcześniej jakość obrazu. Z czasem zaczęto jednak dodawać również małe elementy na stronie jak np. ikona telefonu, lokalizacji, czy też cennika.
Obecnie występują projekty, w których SVG jest widoczne w prawie każdej sekcji na stronie, a jedynymi elementami, które nie są wektorowe są zdjęcia, fotografie, których przekonwertowanie na krzywe byłoby nieopłacalne.
Co czeka nas w przyszłości? Myślę, że zastosowanie SVG będzie szersze niż obecnie i zdecydowanie bardziej popularne. Przeglądarki, zarówno mobilne jak i desktopowe wciąż się rozwiajają i ich autorzy na pewno mocno pracuja nad wykorzystaniem bezstratnych formatów, takich jak SVG.
Nie ma absolutnie żadnego powodu, żebyś nie zaczął stosować SVG na swojej stronie już dzisiaj. To najlepsza metoda przedstawienia grafik w witrynie, jaką obecnie świat technologii posiada!
