Google Remarketing
TechBlog - wszystkie artykuły

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.

O innych zaletach z stosowania grafik wektorowych można przeczytać w artykule: Co to jest SVG Sprites?


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

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

Przykładowa animacja dla pliku SVG:

CSS
CSS
#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. 

HTML
<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.

HTML
<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.

CSS
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.

HTML
<style type="text/css">
<![CDATA[
    @import url(http://psd2css.pl/prod/assets/css/animation.css);
]]>
</style>

  • problemy związane z parametrami okna
  • problematyczny podczas stylowania
  • ładowanie zewnętrznych stylów w pliku graficznym
HTML
<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.

Twoja przeglądarka nie obsługuje SVG

  • posiada fallback
  • wymuszenie ładowania zewnętrznych stylów w pliku graficznym
HTML
<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.

HTML
HTML
...
<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.

Ciasteczka Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dzięki nim możemy indywidualnie dostosować stronę do twoich potrzeb. Każdy może zaakceptować pliki cookies albo ma możliwość wyłączenia ich w przeglądarce, dzięki czemu nie będą zbierane żadne informacje.