Autor: Paweł Krzywina. Korekta: Kaja Rowicka
Format SVG i jego zastosowanie na stronie
Responsywność, czyli dopasowanie strony internetowej do rozmiaru i rozdzielczości ekranu, zapewnia użytkownikom optymalne wrażenia. W dzisiejszych czasach, w których to coraz częściej i chętniej korzystamy z urządzeń mobilnych jest wręcz koniecznością.
To w zupelności normalne, że ludzie oczekują teraz wygodnego przeglądania witryn internetowych, zarówno na smartfonie, jak i komputerze.
Niektóre wybrane przez nas zdjęcia mogą wydawać się dobre, ale tylko na pierwszy rzut oka, gdy tylko widzowie zechcą je powiększyć, być może zaczną zastanawiać się czy pojawiająca się nieostrość i rozmycie to kwestia źle dobranych okularów czy wada strony.
Z pomocą w tym elemencie przychodzi format graficzny SVG (rozszerzenie .svg), który mimo posiadania specyfikacji W3C (World Wide Web Consortium) od 2001 roku, wydaje się, że nie zyskał jeszcze rozgłosu na jaki zasługuje.
Wybierając zdjęcia na naszą stronę www mamy dwie opcje: grafiki rastrowe lub wektorowe. Obraz rastrowy to zwykle fotografia; ma ustaloną rozdzielczość i składa się z pikseli.
Po powiększeniu traci swoją jakość i może być „rozpikselowany”. Obraz wektorowy jest tworzony za pomocą punktów, kształtów i linii, a jego powiększenie nie wiąże się z jakąkolwiek utratą jakości.
Obrazy w wektorach mają ograniczoną liczbę szczegółów, które mogą zawierać, dlatego najlepiej sprawdzają się jako elementy typograficzne, logo, ikony lub ilustracje. Format SVG, zaliczany oczywiście do tej drugiej grupy, zaczyna odgrywać coraz ważniejszą rolę w projektowaniu stron internetowych.
SVG, czyli Scalable Vector Graphics – definicja
SVG to format wektorowy, lub inaczej mówiąc, skalowalna grafika wektorowa. Jest ona prostym formatem graficznym opartym na XML-u, czyli rozszerzalnym języku znaczników (z ang. Extensible Markup Language). Używa trzech typów obiektów do opisu grafiki:
-
obrazów
-
tekstu
-
kształtów wektorowych m.in.:
-
linie
-
ścieżki
-
ramki
-
okręgi
-
wielokąty
-
Dowolny program rozpoznający format XML, taki jak np. przeglądarka internetowa, może wyświetlać obraz przy użyciu informacji zawartych w pliku SVG.
Format, opisany przez tekstowy język graficzny, dotyczy tylko dwuwymiarowej grafiki, ale może też obsługiwać interaktywność, animację i skrypty.
Do tworzenia grafiki w formacie SVG można użyć Adobe Illustrator, Inkspace, Sketch, Sodipodi lub innego dowolnego edytora tekstu.
Największe zalety rozszerzenia SVG
Obrazy SVG są powszechnie obsługiwane przez wszystkie współczesne przeglądarki na komputerach i urządzeniach mobilnych. Poniżej prezentujemy kilka powodów, które wyjaśniają dlaczego SVG idealnie pasuje do projektu strony internetowej.
Skalowalność
Pierwszą i najważniejszą cechą wyróżniającą SVG spośród innych, tradycyjnych rozszerzeń graficznych, jest skalowalność, która oznacza, że nie ogranicza go wielkość czy chociażby rozdzielczość.
Pliki SVG zachowują tę samą jakość i ostrość niezależnie od rozmiaru ekranu, na którym są wyświetlane. Czy faktycznie osiągniemy w ten sposób lepszy efekt?
Oczywiście. W praktyce powiększony obraz rastrowy może wydawać się rozmazany, jeśli nie posiada on odpowiedniej rozdzielczości. Jego małe piksele są zmuszone do rozszerzenia poza pierwotną wielkość.
Z kolei charakterystyka wektorowa SVG sprawia, że nie jest on zależny od pikseli, a tym samym też zawsze jest wyraźny.
Mały rozmiar grafiki
Największym problemem grafik rastrowych na responsywnych stronach internetowych jest ich rozmiar. Obrazy te nie skalują się tak samo jak wektory, dlatego też należy dostarczyć je w możliwie jak największej rozdzielczości.
Grafikę możemy zmniejszyć, co nie odbije się na jej jakości, ale już odwrotny zabieg, czyli powiększenie nie da nam dobrych efektów. Zazwyczaj dochodzi do sytuacji, w której wgrany przez nas obraz jest znacznie większy niż prezentowany na ekranie użytkownika, ale mimo wszystko zmuszany jest za każdym razem do pobierania większego pliku, niż jest to wymagane.
Rozmiar plików SVG rośnie w zależności od liczby zawartych szczegółów np. warstw, gradientów, animacji czy efektów, ale sama ich waga zawsze pozostaje bez zmian, bez względu na wymiary grafiki.
Przez to, że wymiary praktycznie w ogóle nie wpływają na wagę, SVG idealnie sprawdza się do użycia w przypadku logotypów, czcionek czy wykresów. Pamiętajmy jednak, że jeśli chodzi o bardzo szczegółowe grafiki (np. ilustracja wektorowa Pałacu Kultury z tysiącami wypełnień i innych detali), to mogą one okazać się dość ciężkie. Dlatego też przy szczegółowych fotografiach lepiej korzystać z rozszerzenia JPEG czy PNG.
Szybkość ładowania strony www
Abstrahując od małego rozmiaru plików, który oczywiście przekłada się na szybkość ładowania strony, SVG potrafi być niezwykle wydajny, gdy dodamy go bezpośrednio do kodu HTML.
W oparciu o kod tekstowy przeglądarka “rysuje” grafikę bez konieczności jej pobierania. Osadzenie SVG w kodzie HTML, zwane „inline SVG”, eliminuje żądanie HTTP (czyli protokołu przesyłania dokumentów hipertekstowych) potrzebne do załadowania naszych grafik i przyspiesza działanie strony.
SEO i dostępność
Zwykłe obrazy nie zawierają treści do indeksowania, chyba że dodamy do nich atrybuty alt oraz title. Jak już wspomnieliśmy na począku obrazy SVG są zdefiniowane w plikach XML, przez co łatwo możemy umieścić tam słowa kluczowe i opisy, które zostaną rozpoznane i zindeksowane przez roboty wyszukiwarek.
Ponadto forma tekstowa pozwala na rozpoznanie tekstu i rysunków przez czytniki ekranów, co dodatkowo wpływa na dostępność naszej witryny.
Animacje
Pliki SVG mogą być stylizowane i animowane m.in. za pomocą CSS (kaskadowe arkusze stylów, czyli język służący do opisu formy prezentacji stron WWW) czy JavaScript (język programowania). Efekty takie jak transformacja lub przejście, których używamy w elementach HTML, mogą być również używane w pliku SVG.
Oczywiście wymaga to odpowiedniego zapoznania z zasadami kodowania, ale możliwości są ogromne. Przykładowo możemy stworzyć lekką ikonę, która zmienia się na różne sposoby w zależności od rozmiaru ekranu, gęstości pikseli czy innych czynników.
Edycja
Pliki SVG są wygodne w użytku, a jeśli posiadamy program do tworzenia grafiki wektorowej (taki jak np. Adobe Illustrator i XD, Corel Draw czy Sketch), możemy je również edytować. Zmian dokonamy także przy pomocy edytora tekstów-zmieniając np. współrzędne, konkretne wyrażenia czy reguły CSS i JavaScript.
Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste
Darmowe pliki SVG w projektach WebWave
Oczywiście w kreatorze stron www WebWave bez problemu możemy korzystać z wektorowych grafik SVG. Sprawę ułatwia darmowy bank ikon, z którego mogą korzystać wszyscy webmasterzy.
Pamiętajmy więc o tym, że wybór SVG pomoże zachować wyrazistość i jakość zdjęć na każdym ekranie, na którym będzie wyświetlana witryna.
Jeśli jednak nie zawsze chcemy korzystać z plików w formie SVG, możemy też postawić na inne grafiki, a następnie je skompresować. O tym jak i gdzie szukać tych, które pobierzemy za darmo oraz w jaki sposób wpłyną one na SEO pisaliśmy w tym artykule.
Grafika na stronie internetowej- podsumowanie porównujące
Grafika rastrowa
-
budowana na podstawie prostokątnej siatki punktów- pikseli.
-
najlepsze rozwiązanie w przypadku realistycznych obrazów-zdjęć
-
swobodne pomniejszanie
-
przy powiększaniu tracą na jakości-zanik detali, wrażenie rozmycia
-
formaty typu PNG i JPEG
Grafika wektorowa
-
rozszerzenie grafiki rastrowej
-
zapisuje się w postaci punktów, zdefiniowanych kształtem geometrycznym.
-
dowolność skalowania, dzięki umieszczeniu w matematycznym układzie współrzędnych
-
zmiana proporcji bez utraty na jakośći
-
nie zawierają dużej ilości detali
-
format typu SVG
Często zadawane pytania: jak przekonwertować SVG do PNG?
Wybór najlepszego sposobu konwersji pliku SVG do PNG zależy od Twoich potrzeb. Jeśli masz zainstalowany program do edycji grafiki, taki jak Adobe Photoshop, możesz go użyć. Jest to dobry wybór, jeśli chcesz mieć kontrolę nad całym procesem. Jeżeli jednak nie zamierzasz instalować dodatkowego oprogramowania, możesz użyć konwentora online, np. svgtopng.com
Podsumowanie
Jakość ekranów i wyświetlaczy, z których korzystamy, nieustannie rośnie, dlatego tak samo powinniśmy dbać o grafiki na naszej stronie www.
W związku z tym, że pliki SVG mogą być responsywne, animowane oraz złożone, nie ma powodu, dla którego powinniśmy wstrzymywać się od ich używania na witrynach internetowych.
Oczywiście dla fotografii preferowanym wyborem nadal pozostaje grafika rastrowana, m.in. ze względu na głębię jej kolorów. Jednak jeśli chodzi o elementy takie jak logo, ikony, czcionki czy wykresy, grafika wektorowa nadaje się idealnie.
Co jeszcze przemawia za SVG, to fakt, że jest on wspierany przez wszystkie nowoczesne przeglądarki internetowe. Tylko starsze wersje Internet Explorera (8 i poniżej) oraz Androida, nie obsługują tego formatu.
Nieskończona skalowalność sprawia, że obrazy SVG pozostaną wyraźne i estetyczne na wszystkich, nawet najbardziej wymagających urządzeniach.
A co Wy sądzicie o tym rozszerzeniu? Czy używaliście plików SVG na swoich stronach www…a może dopiero się do nich przekonaliście?
Koniecznie przeczytaj również te teksty:
Data aktualizacji: 10 grudnia 2021
Popularne artykuły.
Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.
contact@webwavecms.com
+48 731 395 898
Porozmawiaj z nami na czacie
Od godziny 08:00 do 24:00
Ta strona została stworzona w kreatorze WebWave.
Znajdziesz nas na:
Kreator WebWave.
Oferta.