Ta strona korzysta z ciasteczek cookies Rozumiem.
podstawy SVG

Podstawy SVG – od czego zacząć

30 października 2017, Kasia Ziomek-Zdanowicz

inne


Skalowalna grafika wektorowa (scalable vector graphics, SVG) jest łatwa do użycia na stronie internetowej i jest wiele powodów, dla których warto jej używać. W tym poście przedstawiam podstawy SVG . Wymieniam również różne zasoby, które mogą pomóc osobom początkującym, które chcą zacząć wykorzystywać SVG w swoich projektach.

Podstawy SVG

Jest to subiektywny wybór tematów związanych z SVG.

Podstawy SVG – budowa

  • SVG opiera się na składni XML. Dlatego, jeśli znasz język HTML, szybko zrozumiesz składnię SVG. Musisz jednak znać niektóre z elementów dedykowanych do tworzenia SVG. Podstawowymi elementami, od których można zacząć, są: Dostępne są też elementy animacji, czcionki, gradientów i inne. Pełną listę i dokumentację elementów znajdziesz tutaj.
  • Elementy SVG mogą być modyfikowane za pomocą dedykowanych atrybutów. Podstawowymi atrybutami są: Pełną listę i dokumentację atrybutów znajdziesz tutaj.

Podstawy SVG – ważne pojęcia

  • Jeśli chcesz używać SVG, powinieneś zrozumieć następujące terminy:
    • viewport – widoczny obszar SVG. Rozmiar tego obszaru jest określony w atrybutach SVG: width oraz height,
    • viewBox – atrybut używany do definiowania współrzędnych wewnątrz elementu <svg>.
    Viewport oraz viewBox są istotne dla pozycjonowania i skalowania SVG. Dlatego polecam artykuły o układzie współrzędnych SVG oraz o skalowaniu SVG.

Podstawy SVG – stylizowanie

  • Obrazki SVG mogą być stylizowane przy użyciu wyżej wymienionych atrybutów prezentacji. Możesz ich używać na dwa sposoby:
    • bezpośrednio w elementach SVG (przy wykorzystaniu atrybutu style),
    • w klasach CSS. W tym przypadku można wybierać elementy SVG przy użyciu ich znaczników, klas i identyfikatorów. Pamiętaj, aby użyć atrybutów prezentacji SVG, np. atrybutu fill zamiast właściwości background-color.
  • Można skalować i obracać elementy SVG przy użyciu właściwości transform. Elementy SVG są obracane wokół lewego górnego rogu obszaru rysunku SVG. Możesz zmienić ten punkt właściwością tranform-origin.

Podstawy SVG – jak użyć SVG

  • Istnieje wiele sposobów korzystania z SVG:
    • bezpośrednio w dokumencie HTML. Ten sposób pozwala na manipulowanie SVG. Ale utrzymanie wewnętrznego kodu może być uciążliwe.
    • odwołanie do SVG w elemencie img. Ten sposób nie pozwala na manipulowanie SVG, ale jest prosty i daje korzyści rozmiaru pliku.
    • odwołanie do SVG we właściwości CSS: background-image. Ten sposób nie pozwala na manipulowanie SVG, ale jest prosty i daje korzyści rozmiaru pliku.
    • odwołanie do SVG w elemencie object. Ten sposób pozwala na manipulowanie SVG bez konieczności umieszczania kodu SVG w dokumencie HTML.
  • Jeśli używasz Wordpressa, osadzanie i stylizowanie SVG nie jest łatwe. Można jednak użyć wtyczki: SVG support. Wtyczka umożliwia osadzanie kodu SVG przy użyciu elementu img i dedykowanej klasy CSS. Wtyczka dynamicznie zastępuje wszelkie elementy img, które zawierają dedykowaną klasę, kompletnym kodem SVG.
  • Mniej niż 3% wszystkich użytkowników przeglądających Internet wykorzystuje przeglądarki, które nie mogą wyświetlać SVG. W Polsce jest to około 8% użytkowników (zgodnie z informacjami caniuse). W związku z tym, może być potrzebne rozwiązanie awaryjne. Takie rozwiązanie zależy od sposobu wykorzystania SVG. Ja zazwyczaj używam kodu SVG bezpośrednio w dokumencie, więc korzystam z rozwiązania, które polega na dodaniu do elementu SVG elementu <image>. Jednak to rozwiązanie nie jest uniwersalne, dlatego sugeruję przeczytanie tego artykułu.

Podstawy SVG – narzędzia i zasoby

  • Jeśli chcesz narysować bardziej skomplikowane SVG, możesz użyć programu graficznego np. Inkscape’a. Narysuj w nim co chcesz i zapisz rysunek jako plik SVG. Otwórz plik w swoim edytorze i zobaczysz kod SVG.
  • Nauka rysowania w Inkscape wymaga czasu. Możesz zacząć od gotowych SVG i modyfikować je zgodnie z Twoimi potrzebami (oczywiście jeśli licencja pozwala na modyfikowanie). Poniżej znajduje się lista repozytoriów SVG.

Dlaczego warto używać SVG

Oto powody, dla których warto używać SVG:

  • pliki są małe i dobrze się kompresują,
  • obrazy są skalowane do dowolnego rozmiaru,
  • SVG może być stylizowany i animowane w CSS,
  • wszystkie najważniejsze przeglądarki obsługują SVG.

Zasoby

Dokumentacja

Artykuły i blogi

Mozilla developer guide i inne

Repozytoria SVG

Większość wymienionych repozytoriów jest bezpłatna, niektóre wymagają wskazania autora grafiki. Zapoznaj się z warunkami licencji na poszczególnych stronach.

Czy podobał Ci się ten wpis? Proszę daj mi znać w komentarzach. Dziękuję.


Komentarze

Kasia Ziomek-Zdanowicz, 3 listopada 2017

Adrianie, nie zaglądałam tutaj przez kilka dni, dlatego nie zaakceptowałam Twojego pierwszego komentarza. Przepraszam. Mam świadomość, że komentarze wymagają kilku poprawek, dopracuję je w przyszłości. Dziękuję, że napisałeś. Pozdrawiam Kasia :-)

Adrian, 2 listopada 2017

Ciężko dodać tutaj komentarz. Raz wyrzuci błąd, żeby uzupełnić wszystkie pola, raz że znalazło duplikat, a komentarza nie ma.

Adrian, 1 listopada 2017

"Oto powody, dla których warto używać SVG: pliki są małe" - to zależy od złożoności rysunku wektorowego. Gdy występuje dużo skomplikowanych elementów w rysunku SVG, to może ważyć parę razy więcej niż zwykły jpg. @Tomek Tutaj raczej chodzi o drobną manipulację, np. na ikonach svg, których jest mnóstwo w internecie. SVG opiera się na plikach, które mogą być dodane do DOM strony. Canvas oparty jest na javascript. Jak użytkownik wyłączy obsługę js, to nie zobaczy na stronie elementu canvas. SVG uważany jest też za bardziej dostępny, bo obsługuje tekst. Canvas nadaje się do bardziej złożonych rzeczy jak np. gry.

Tomek, 30 października 2017

Fajny wpis, tak się tylko zastanawiam, czy jeśli nie chcemy manipulować SVG to czy nie lepszy jest dzisiaj canvas? Plusik za linki do grafik :) Dodane do zakładek bo na pewno co jakiś czas się przyda. Pozdrawiam


Napisz komentarz

Twój adres email nie zostanie opublikowany.

Wszystkie pola są wymagane.