Twój e-mail
Zapisz się!
Zapisz się!
Udało się!
Podaj e-mail!

Blog

Tu dowiesz się, jak zrobić stronę internetową.

Chcesz być na bieżąco?

kim są cyfrowi nomadzi

Responsywność, czyli dopasowanie strony www do rozmiaru i rozdzielczości ekranu, zapewnia użytkownikom optymalne wrażenia.

Ludzie oczekują, że będą wygodnie przeglądać naszą witrynę na smartfonie i komputerze, a my zapewnimy najwyższą jakość każdego elementu, także grafik.

Niektóre wybrane przez nas zdjęcia mogą wydawać się na pierwszy rzut dobre, ale gdy 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, który mimo posiadania specyfikacji W3C od 2001 roku, wydaje się, że nie zyskał jeszcze rozgłosu na jaki zasługuje.

Wybierając zdjęcia na naszą stronę www mamy do wyboru dwa typy grafik – rastrowe i 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.

Przewiduje się, że w 2018 roku SVG może dogonić popularnością tradycyjne rozszerzenia, czyli JPG, PNG czy GIF.

 

SVG, czyli Scalable Vector Graphics – definicja

Plik SVG, czyli skalowalna grafika wektorowa, jest prostym formatem graficznym opartym na XML-u, który używa trzech typów obiektów do opisu grafiki – obrazów, tekstu i kształtów wektorowych (m.in. linie, ścieżki, ramki, okręgi czy wielokąty).

Dowolny program rozpoznający format XML, taki jak 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.

 

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 rozdzielczość.

Pliki SVG zachowują tę samą jakość i ostrość niezależnie od rozmiaru ekranu, na którym są wyświetlane. W praktyce powiększony obraz rastrowy może wydawać się rozmazany, jeśli nie posiada odpowiedniej rozdzielczości, gdyż jego małe piksele są zmuszone do rozszerzenia poza pierwotną wielkość.

Natomiast wektorowa charakterystyka SVG sprawia, że nie jest on zależny od pikseli, przez co zawsze jest wyraźny.

grafika rasterowa i wektorowa na stronie www

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 należy dostarczyć je w możliwie jak największej rozdzielczości.

Zawsze przecież możemy zmniejszyć grafikę, co nie odbije się na jej jakości, ale to samo nie działa przy jej powiększaniu. Zazwyczaj dochodzi do sytuacji, w której wgrany przez nas obraz jest znacznie większy niż prezentowany na ekranie użytkownika. Jednak przez to użytkownik zmuszany jest za każdym razem do pobierania większego pliku, niż jest to wymagane.

W przypadku plików SVG waga zawsze pozostaje bez zmian, bez względu na wymiary grafiki. Rozmiar plików SVG rośnie w zależności od liczby zawartych szczegółów np. warstw, gradientów, animacji czy efektów.

Wymiary praktycznie nie wpływają na wagę, dlatego SVG idealnie sprawdza się w przypadku logotypów, czcionek czy wykresów. Oczywiście możemy np. stworzyć grafikę wektorową Pałacu Kultury z tysiącami wypełnień i innych szczegółów, która będzie bardzo ciężka. Dlatego przy szczegółowych fotografiach lepiej korzystać z rozszerzenia JPEG czy PNG.

Dołącz do 100 tysięcy ludzi, którzy tworzą responsywne strony za darmo i bez kodowania

Zbuduj własną stronę www, do której dodasz obiekty wektorowe!
 Zacznij od pustego projektu lub wybierz jeden
z kilkudziesięciu darmowych szablonów. 


STWÓRZ SWOJĄ STRONĘ ZA DARMO 

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 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 i title. 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 czy JavaScript. 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ą wyjątkowe, ponieważ możemy je edytować w programach do edycji grafiki wektorowej (takich jak Adobe Illustrator i Xd, Corel Draw czy Sketch), czyli podobnie jak inne pliki graficzne, ale także w edytorze tekstów.

W tym drugim możemy bezpośrednio zmienić np. współrzędne, konkretne wyrażenia czy reguły CSS i JavaScript.

 

Darmowe pliki SVG w WebWave

Oczywiście w kreatorze stron www WebWave bez problemu możecie korzystać z wektorowych grafik SVG. Sprawę ułatwia darmowy bank ikon, z którego mogą korzystać wszyscy webmasterzy (tutaj przeczytasz instrukcję jak korzystać z darmowego banku ikon).

Spośród setek ikon i innych grafik każdy powinien znaleźć to czego najbardziej potrzebuje. Pamiętajcie, że wybór SVG pomoże Wam zachować wyrazistość i jakość zdjęć na każdym ekranie, na którym będzie wyświetlana wasza witryna.

darmowy bank ikon webwave

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.

Ponieważ pliki SVG mogą być responsywne, animowane i złożone, nie ma powodu, dla którego powinniśmy wstrzymywać się od ich używania na naszych stronach.

Oczywiście dla fotografii preferowanym wyborem nadal pozostaje grafika rastrowana, ze względu na głębię kolorów, jednak do elementów takich jak logo, ikony, czcionki czy wykresy, grafika wektorowa nadaje się idealnie.

SVG jest ponadto wspierany przez wszystkie nowoczesne przeglądarki internetowe, a 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żywacie plików SVG na swoich stronach www?

 

Stwórz w pełni responsywną stronę internetową bez kodowania. Zobacz jakie możliwości oferuje darmowy kreator stron www WebWave! 

Interesujesz się tworzeniem responsywnych stron internetowych? Koniecznie przeczytaj te teksty: 

Autor: Paweł Krzywina. Webdeveloper, dziennikarz, pr-owiec. 5 lat doświadczenia w tworzeniu stron internetowych, z zawodu także dziennikarz biznesowy. Miłośnik języka polskiego, nowych technologii, literatury i sportu.

01 lutego 2018

Blog

Darmowe szkolenie z tworzenia stron internetowych 

WYPRÓBUJ ZA DARMO

Wypróbuj nasz kreator stron internetowych i uzyskaj dostęp do darmowego szkolenia. Po rejestracji wyślemy Ci e-maila z linkiem do zapisu na szkolenie on-line. Na godzinnym szkoleniu dowiesz się jak samodzielnie stworzyć swoją stronę internetową!

Format SVG, czyli responsywne zdjęcia na stronie internetowej

 

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.

Panel webmastera

KONTAKT

contact@webwavecms.com
+48 731 395 898

KREATOR

OFERTA

DLA KLIENTÓW

WEBWAVE

MATERIAŁY

Ta strona została stworzona w całości przy użyciu naszego kreatora stron www WebWave. Na tej stronie wykorzystujemy ciasteczka. Dowiedz się więcej.

PL

EN

POZNAJ NAS BLIŻEJ W SIECI

Zacznij Teraz

RO

ZACZNIJ TERAZ

PANEL WEBMASTERA

Logowanie