SVG - wektorowe pliki graficzne, a nowoczesne strony internetowe

Co to jest SVG?

Wektorowy format plików

SVG jest to wektorowy format obrazków.  SVG czyli  Scalable Vector Graphics, to skalowalna grafika wektorowa. Język SVG jest oparty na języku XML i jest oficjalnym standardem World Wide Web. Oznacza to, że jest to grafika, którą można parametryzować i "programować" - używać w aplikacjach internetowych takich jak np. konfiguratory produktów. SVG umożliwia używanie gradientów, masek przezroczystości, 

Skalowanie obrazów

Dzięki temu, że SVG jest formatem wektorowym umożliwia swobodne skalowanie obrazu - czyli np. przybliżanie i oddalanie rzutu produktu w trakcie jego konfigurowania lub też pokazywanie na różnych etapach konfigurowania - różnych fragmentów powiększonych na cały ekran (zoom in / zoom out).

Inne możliwości SVG to: kompresja, animowanie, 

Animowanie SVG może posłużyć np. do animacji obrotu bryły produktu. Potrzebny jest do tego jednak odpowiedni rysunek techniczny.

Zastosowania SVG

Flash przestaje być wspierany i wychodzi z użycia. Wszystkie technologie wymagające zainstalowania w przeglądarce dodatkowych wtyczek są w końcu utrudnieniem życia użytkownikowi. Strona internetowa czy też aplikacja musi działać szybko, żeby jej używanie sprawiało satysfakcję użytkownikowi.

Poniżej prezentuję kilka przykładowych, interesujących wedłyg mnie zastosowań SVG.

Rysowanie logotypu

Jednym z ciekawych zastosowań SVG jest rysowanie logotypu firmy. Jest to ciekawy efekt do zastosowania na głównej stronie serwisu firmowego.

Strona www.totalbud.pl zrealizowana przez Krakweb

Animacje tekstów

http://svg-wow.org/camera/camera.xhtml

Animacje 3D prostych obiektów

http://debeissat.nicolas.free.fr/svg3d.php

Efekty (filtry) wideo

https://www.paulirish.com/work/videooo.xhtml

Schematy

http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg

Animacje - kreskówki

http://codepen.io/marknelson/pen/KwJmjj

preloadery (animacje ładowania)

http://samherbert.net/svg-loaders/

zegarek

http://preview.codecanyon.net/item/animated-svg-clock/full_screen_preview/13541567 

mikroefekty np. na ikonach: http://preview.codecanyon.net/item/animated-svg-browser-icons/full_screen_preview/10431877?_ga=1.120594760.1926146577.1477468044

Nowoczesne strony www prezentujące możliwości SVG

http://startuplab.no/ 

http://rollpark.us/ 

https://draft.co.jp/en 

http://www.grosselanterne.com/en/ 

https://www.supremo.tv/typeterms/ 

Więcej inspiracji: http://www.awwwards.com/websites/svg/

Rozwinięcie - materiały dodatkowe

1. http://www.hongkiat.com/blog/svg-animations/
2. https://colorlib.com/wp/svg-animations-examples/  
3. http://amplience.com/products/dynamic-media/product-customization/