Osadzanie i stylowanie SVG – garść przydatnych informacji

Osadzanie i stylowanie SVG – garść przydatnych informacji

SVG ma już 18 lat i zdaje się, że nie ma sobie równych. Jest obsługiwane przez większość przeglądarek i jest łatwe w obróbce. W tym artykule zebrałem garść istotnych informacji na temat plików grafiki wektorowej. Dowiedz się jakie są ich zalety i jak wygląda osadzanie i stylowanie SVG na stronach internetowych.

Wprowadzenie

SVG (Scalable Vector Graphics) SVG (Scalable Vector Graphics) to popularny format grafiki wektorowej reprezentowanej w postaci kodu XML. Każdy plik SVG składa się z zestawu tagów definiujących kształty i ścieżki. Dzięki takiemu rozwiązaniu jesteśmy w stanie manipulować wyglądem dowolnej grafiki wektorowej z poziomu CSS lub JavaScript odwołując się do konkretnego tagu lub ich grupy.

Dlaczego powinieneś używać SVG?

  • Przede wszystkim, grafiki SVG są w pełni skalowalne i niezależne od rozdzielczości ekranu. Oznacza to, że grafiki te można dowolnie zmniejszać lub powiększać bez utraty jakości. Będą one wyglądały perfekcyjnie w każdej sytuacji: od klasycznego ekranu, przez te ze zwiększoną gęstością pikseli (jak Retina) aż po drukarkę.
  • Bezpośrednio z poziomu CSS możesz manipulować elementami nadając im własne style. Jest to bardzo elastyczne rozwiązanie w przypadku gdy okaże się, że potrzebna jest zmiana koloru czy przesunięcie elementu o kilka pikseli.
  • Łatwo zaimportować go do tablicy JavaScript i operować na nim. Dzięki temu masz możliwość tworzenia wspaniałych animacji – nawet bez użycia przeznaczonych do tego celu bibliotek.
  • Ponieważ SVG to nic innego jak tekst, jego rozmiary są znacznie mniejsze niż w przypadku bitmap JPEG czy PNG.
  • SVG ma doskonałe wsparcie przeglądarek – również tych starszych. W skrajnych przypadkach, łatwo stworzyć dla nich fallback (czyli kod, którym zostanie zastąpione gdy nie będzie obsługiwane).

Osadzanie SVG na stronie

Sposobów na osadzenie SVG jest kilka lecz moim zdaniem tylko jeden z nich jest dobry. Zacznę od tych, które mają niewielkie zastosowanie lecz warto wiedzieć, że tak można.

1. Element image

Pliki SVG jak wszystkie inne formaty graficzne, można osadzić w kodzie w następujący sposób:

Takie rozwiązanie nie różni się niczym od klasycznych obrazków i dokładnie tak samo się zachowuje. Ta metoda jest dopuszczalna lecz nie pozwala on na żadną manipulację wyglądem.

2. Jako background-image

background-image: url('grafika.svg');

W tym wypadku sprawa ma się podobnie. Metoda ta nie pozwala nam modyfikować ścieżek i kształtów zapisanych wewnątrz pliku.

3. Object i iframe

Do dyspozycji mamy również mało popularne metody wykorzystujące <object> czy <iframe>.

 

4. Inline czyli wewnątrz kodu HTML

Tutaj rozpoczyna się cała przygoda. Wystarczy otworzyć SVG w dowolnym w edytorze tekstowym a naszym oczom ukaże się XML, o którym pisałem we wstępie:

   

Jak widać, element SVG zawiera szereg atrybutów definiujących jego wygląd. Część z nich, jak chociażby fill, stroke, stroke-width czy opacity może być definiowana wewnątrz stylów CSS jak i inline. Inne atrybuty jak x, y czy cx, cy mogą być definiowane jedynie w kodzie HTML. Pełną listę atrybutów wraz z opisami można znaleźć na oficjalne stronie formatu SVG https://www.w3.org/Graphics/SVG/.

5. Definiowanie symboli

Kod XML-a, szczególnie rozbudowanych grafik, bywa obszerny a każdorazowe powielanie go może być nieco uciążliwe. SVG umożliwia nam definiowanie tzw. symboli i wielokrotne odwoływanie się do nich. Ta metoda jest szczególnie przydatna gdy musimy przygotować zestaw ikon, które będą używane w wielu miejscach. Definiowanie zestawu symboli wygląda następująco:

   
      
         icon-right-arrow
         
       
       
          icon-bold-arrow
          
       
   

Kluczową sprawą jest nadanie każdemu z symboli unikalnego identyfikatora. Z tak przygotowanym zestawem możemy odwoływać się do grafiki przy pomocy tagu <use>:

   

Stylowanie SVG przy pomocy CSS

CSS został stworzony by definiować parametry prezentacji poza strukturą dokumentu hipertekstowego. W przypadku SVG sprawa ma się podbnie. Wewnątrz stylu CSS możemy odwoływać się do poszczególnych elementów np. <circle> – koło czy <line> – linia, nadając im własne style. Przykładowy CSS wygląda następująco:

svg.icon {
   circle {
      fill: #4c8ca2;
      stroke: #d95b29;
      stroke-width: 2;
      @media screen and (min-width: 768px){
         stroke-width: 4;
      }
   }
}

Możemy również grupować tagi wykorzystując element <g>.

   
      
      
   
   
      
      
      
   

Następnie w pliku CSS:

#circles {
   fill: red;
   transition: fill .15s linear;
   &:hover {
      fill: green;
   }
}
#lines {
   stroke: black;
   stroke-width: 3;
}

Animowanie grafik SVG

SVG może być animowane w dokładnie ten sam sposób co inne elementy HTML, używając keyframes czy transition. W większości przypadku animacje sprowadzają się do zmiany koloru, obrotu czy wielkości.

#square {
   fill: #4c8ca2;
   animation: spin 1s linear infinite;
}
@keyframes spin {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

Podobnie ma się sprawa w przypadku ścieżek. Ścieżka nie tworzy kształtu sama w sobie lecz definiuje zbiór punktów. Dzięki sprytnemu rozwiązaniu, stosunkowo łatwo uzyskać efekt „rysowania linii”.

   

oraz w CSS:

path {
   stroke-dasharray: 1000;
   stroke-dashoffset: 1000;
   animation: dash 5s linear alternate infinite;
}
@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Zobacz jak wygląda rezultat: demo w Codepen.

Podsumowanie

Szerokie zastosowanie i elastyczność plików SVG sprawiły, że stały się one wiodącym formatem graficznym na stronach internetowych jak i w aplikacjach mobilnych. Kluczowym argumentem przemawiającym na ich korzyść jest skalowalność i możliwość modyfikowania wyglądu bez użycia programów graficznych.
Oprócz tego, w sieci udostępnione są setki narzędzi służących obróbce i animacji grafik SVG. Dzięki nim możemy generować zestawy ikon w postaci font-face czy tworzyć zaawansowane animacje w JavaScript. Przykłady takich narzędzi i bibliotek:

Jeżeli do tej pory nie korzystałeś z SVG, zachęcam Cię do eksperymentowania i wdrażania go do własnych projektów. Zmniejszysz wagę strony oraz liczbę requestów do serwera, zapewniając jednocześnie wysoką jakość grafik w każdym medium.

Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.