Animacje SVG na stronie WWW

Jedną z zalet ze stosowania grafik wektorowych jest możliwość dodania do niej animacji. Przyjrzyjmy się jednemu ze sposobów na uzyskanie zamierzonego efektu.

Przykładowy kod SVG, którym będziemy się posługiwać (uproszczony):

<svg id="icon-front-end">
	<g>
		<path id="left"/>
		<path id="center"/>
		<path id="right"/>
	</g>
</svg>

Przykładowa animacja dla pliku SVG:

#icon-front-end__left {
  animation-timing-function: ease-in-out;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-name: anim-1;
}
#icon-front-end__right {
  animation-timing-function: ease-in-out;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-name: anim-2;
}
@keyframes anim-1 {
  20% {
    fill: #28a9e0;
  }
	60% {
		transform: translateX(-180px);
	}
}
@keyframes anim-2 {
  20% {
    fill: #28a9e0;
  }
	60% {
		transform: translateX(180px);
	}
}

img

Stosowanie tagu <img> dla grafiki SVG głównie używane jest dla grafik statycznych (brak dostępu dla DOM obiektu). Odwołanie się w CSS do klas ścieżek nie powoduje żadnej zmiany.

<img src="front-end.svg" alt="Plik SVG" />

Z drugiej strony istnieje możliwość do zamieszczenia animacji. Do pliku SVG wystarczy dodać blok <style> i w nim zdefiniować animacje. Może to być jednak problematyczne podczas rozrastania projektu.

<img src="front-end-inline.svg" alt="Plik SVG" />

background-image

Tak jak w przypadku tagu <img> – nie jest to zalecana metoda wstawiania animowanych wektorów. Obiekty w SVG są animowane jedynie przez wewnętrzne style. Dodatkowo background-image posiada słabszą kompatybilność ze starszymi przeglądarkami.

background-image: url(front-end-inline.svg);

iframe

Najgorszym chyba z pomysłów jest wyświetlanie wektorów w tagu <iframe>. Powoduje wiele problemów z ostylowaniem elementu. Animowaną grafikę można stworzyć poprzez dołączenie zewnętrznego stylu do pliku SVG.

<style type="text/css">
<![CDATA[
    @import url(https://ui2web.com/prod/assets/css/animation.css);
]]>
</style>

• problemy związane z parametrami okna
• problematyczny podczas stylowania
• ładowanie zewnętrznych stylów w pliku graficznym

<iframe src="front-end-inline.svg"></iframe>

object

Wyświetlenie SVG w tagu <object> również pozbawia nas dostępu do DOM przez CSS. Tak samo jak iframe pozwala ładować zewnętrzne style w pliku graficznym.

• posiada fallback
• wymuszenie ładowania zewnętrznych stylów w pliku graficznym

<object type="image/svg+xml" data="front-end-inline.svg">
    <!-- Fallback -->
</object>

Bezpośrednie wrzucenie SVG w HTML

Subiektywnym zdaniem najlepszą metodą na dodawanie grafik wektorowych, a następie manipulacja wartościami przez CSS (wprawienie animacji) jest dodanie kodu grafiki bezpośrednio w kod HTML (inline). Metoda nie jest bez wad, bo wiąże się z utratą czytelności
pliku HTML (dołączanie długich ciągów). Istnieje na szczęście task runner jak grunt, który z łatwością pozwala zamienić shortcode z wersji deweloperskiej, na pełny kod svg dla wersji produkcyjnej.

...
<div class="panel-content">
    <svg id="icon-front-end">
	    <g>
		    <path id="left"/>
		    <path id="center"/>
		    <path id="right"/>
	    </g>
    </svg>
<div class="wrap">
...

Bezpośrednie wrzucenie SVG do pliku HTML daje dużo możliwości. Widoczny zostaje DOM dla SVG, którego możemy dowolnie stylować, odwołując się do identyfikatorów (np. „icon-head__head” i „icon-head__eyes”). Tworzenie animacji w tym kroku nie powinno już
sprawić żadnych problemów.

Dzięki tej metodzie nie musimy dołączać bezpośrednio do pliku SVG kodu odpowiedzialnego za animację.

Zyskujemy również szybkość podczas wczytywania strony ponieważ oszczędzamy HTTP request.

Podsumowanie

Sposobów na umieszczanie animowanych ilustracji SVG w kodzie HTML jest kilka. W artykule poruszyliśmy szczegółowo jedynie jedno rozwiązanie, które uważam za najlepsze. Zachęcam do próby skorzystania z niego przy następnym projekcie.