MerixGames

3 grudnia 2015

/ code & tools

Czym są pliki SVG i jak je wykorzystać?

Marcin Wasilewski

Pliki SVG są niewątpliwie innym podejściem do sposobu wyświetlania grafiki na stronach internetowych niż te, do których jesteśmy przyzwyczajeni. Okazuje się, że za pomocą styli i skryptów możemy wpływać na kod grafiki, a także ją animować!

Czym są pliki SVG?

svg

Pliki SVG w odróżnieniu od obrazków zamieszczonych na stronach internetowych, do jakich jesteśmy przyzwyczajeni należą do grupy formatów grafiki wektorowej. Jest to uniwersalny format będący pochodną języka XML nie obciążony żadnymi licencjami i patentami. Możemy używać go zarówno do statycznych obrazów jak i go animować. Kod pliku przechowywany jest w formie tekstowej co oznacza, że możemy go bez problemu otworzyć chociażby w notatniku (w ostateczności) i edytować jego zawartość! Jako, że format powstał z myślą o wykorzystaniu na stronach internetowych możemy bez większego problemu odwoływać się do niego w kodzie HTML, a także bezpośrednio go w nim osadzać, co umożliwia nam bezpośrednią ingerencję w kod  grafiki za pomocą CSS’a i Javascriptu!

Różnica między grafiką wektorową a rastrową

Większość grafik na stronach internetowych jest w formacie rastrowym. Natomiast SVG jak wspomniałem wcześniej jest formatem wektorowym. Największą różnicą pomiędzy tymi dwoma typami grafik jest sposób ich zapisu. W grafice rastrowej, którą zapisujemy w formatach takich jak np. JPG, GIF czy PNG zapisywane są informacje o każdym pojedynczym punkcie/pikselu. Przykładem takiej grafiki jest chociażby zdjęcie z aparatu cyfrowego. Grafika wektorowa w przeciwieństwie do rastrowej zawiera matematyczny opis figur geometrycznych umiejscowionych w układzie współrzędnych wraz z opisem kolorów. Umożliwia to odtworzenie obrazu w dowolnej jakości bez utraty ostrości. Zaletą plików wektorowych jest także ich niewielka waga, gdyż komputer nie musi odtwarzać całego obrazka piksel po piskelu, a jedynie generować obraz z opisanych punktów. Z tego powodu wektor idealnie nadaje się do ilustracji, bądź wykresów, lecz nie da już sobie rady ze skomplikowanymi grafikami jak zdjęcia.

jpg vs svg

Jak zbudowana jest grafika SVG?

Jako że pliki SVG oparte są o język XML, osoba nie mająca problemu z HTML’em (a jest ktoś kto ma? ;) ) bez większego kłopotu zrozumie jego budowę.

Przykładowy kod pliku SVG wygląda następująco:

See the Pen dGbwRB by Anita (@smotchi) on CodePen.

Kółko, którego środek jest umieszczony w punkcie 80 na osi X i 60 na osi Y o średnicy 60 punktów.

Zawiera wypełnienie o kodzie #ff8e36, oraz czarne obramowanie o wielkości 3 punktów.

Możliwe jest też uzyskanie eliptycznego kształtu za pomocą tagu ellipse.

<rect id="kwadrat" x="200" y="0" style="width: 180px; height: 120px; fill: #000; stroke: #ff8e36; stroke-width: 3px"/>

Czworokąt umieszczony w punkcie na osi X - 200, Y – 0 o wysokości 120 px i szerokości 180 px.

Wypełniony czarnym kolorem i pomarańczowym obramowaniem o szerokości 3px. 

Zauważyliście różnice w definiowaniu właściwości danego kształtu?

Właśnie! Opisywać figury możemy zarówno za pomocą parametrów, albo przy użyciu CSS’a. SVGi przyjmują większość właściwości CSS, co umożliwia nam dodawanie efektów takich jak: hover, transition i inne, do czego wrócę w dalszej części artykułu.

<g transform="translate(10,20)">

[…]

</g>

Struktura SVG’ów umożliwia nam osadzanie elementów w grupy i przeprowadzanie na nich na przykład transformacji. W naszym przykładzie kółko i kwadrat znajdują się w grupie, która została przesunięta o 10 pkt w osi X i 20 w osi Y.

<path id="linia" fill="none" stroke="#cc0000" stroke-width="5" d="M450,120.8c-10.5-39.2,55.8-45.7,55.8-45.7s30.3,3.2,22.6-42"/>

Tag path definiuje ścieżkę w parametrze d, w którym wypisujemy listę punktów itd.

W tym momencie polecam już skorzystać z Adobe Illustratora, lub darmowego InkScape, gdyż ręczne pisanie ścieżek jest trudne i czasochłonne.

Animacje SVG

Pliki SVG można animować, co może dodatkowo podnieść efektywność naszej strony.

Przewagą nad np. animowanymi plikami GIF jest mniejszy rozmiar (animacja jest generowana) i większa kontrola.

See the Pen LGPMjo by Anita (@smotchi) on CodePen.

Są dwa sposoby na uzyskanie animacji:

  • Wewnątrz pliku SVG
<animate xlink:href="#prostokat" attributeName="height" values="120; 250; 120" keyTimes="0; 0.5; 1" dur="2s" begin="0" repeatCount="indefinite"/> 

W tym sposobie określamy w xlink:href element, do którego będziemy się odnosić, a attributeName to właściwość, którą będziemy animować. W kolejnych dwóch parametrach ustalamy wartości, do jakich wybrana właściwość ma się animować oraz czas, w których ona nastąpi. Dodatkowo możemy wybrać od kiedy nasza animacja ma się rozpocząć w parametrze Begin, repeatCount natomiast definiuje ilość powtórzeń animacji. W naszym przypadku jest ona nieskończona.

  • Za pomocą styli CSS
#prostokat {

   animation: rect 2s linear infinite;

}

@keyframes rect {

  0% {height: 250px}

  50% {height: 120px}

  100% {height: 250px}

}

Tutaj zakładam, że wszystko jest zrozumiałe :) A to dlatego, że elementy osadzone w kodzie HTML (nie wyświetlane za pomocą tagu img) można animować jak dowolnie inny element DOM’u w strukturze strony.

Oczywiście jest dużo więcej możliwości animowania SVG’ów. Możemy chociażby wywołać animacje po najechaniu myszką lub kliknięciem.

See the Pen pgzqaa by Anita (@smotchi) on CodePen.

Nie ma też żadnych problemów by oskryptować grafikę i na przykład animować ją za pomocą transition zmianę wartości.

Animowane linie

Jednym z moich ulubionych sposobów wykorzystania SVG’ów jest możliwość animowania ścieżek.

See the Pen BjBvrp by Anita (@smotchi) on CodePen.

Do uzyskania powyższego efektu wystarczy, że narysujemy ścieżkę, nadamy kolor, obrys i następnie parametrami stroke-dasharray definiujemy przerywany obrys, którego przerwa powinna być sumą długości ścieżki. Do animacji wystarczy byśmy zmieniali wartość stroke-dashoffset do przesunięcia przerywanego obrysu. W ten sposób imitujemy rysowanie linii.

Dodatkowe możliwości SVG

Co prawda CSS3 obsługuje maski, lecz rzadko możemy je spotkać oraz użyć ze względu na brak pełnego wsparcia w przeglądarkach. Z pomocą przychodzi nam ponownie SVG, który nie dość że je obsługuje nie ma takiego problemu z wyświetlaniem.

See the Pen JGPwLV by Anita (@smotchi) on CodePen.

Canvas jako alternatywa

Alternatywą dla SVG, jest Canvas w którym również możemy rysować kształty i następnie je animować, ale w tym wypadku niezbędny jest Javascript. Wcześniej do podobnych efektów używano również Flasha, który także wymaga obecności wtyczki w przeglądarce.

Wielkim plusem SVG jest możliwość ożywienia strony bez użycia skryptów czy zewnętrznych rozwiązań.

Pliki SVG z powodzeniem wykorzystaliśmy w projekcie Polish Christmas Guide, który jest doskonałym podsumowaniem powyższego artykułu - przekonajcie się sami ;)

Myślisz o realizacji projektu?

Skontaktuj się z nami. Przygotujemy wycenę, opowiemy o szczegółach i procesie wdrożenia.

Napisz do nas

Strona używa plików cookies. Wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.