Image for Animacje SVG na stronie WWW

Animacje SVG na stronie WWW

Czas czytania:

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):

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

zapraszamy do kontaktu

UI2WEB.com jest firmą technologiczną skupioną wokół rozwiązań WordPress / WooCommerce /PHP/ HTML5. Oferujemy zarówno usługi wdrożeniowe jak również body leasing programistów front-end oraz back-end.

Jeśli trafiłeś tu poszukując odpowiedzi na istniejące problemy i masz dość współpracy z freelancerami a stawiasz na bezkompromisową jakość.

Zapraszamy do kontaktu

Może Cię również zainteresować:

Co wyróżnia profesjonalne wdrożenie serwisu bazującego na WordPress?

Post pochodzi z naszych kanałów w Social Media. — Nasi klienci często pytają, czym różnią… Read More

Czy warto decydować się na usługę wdrożenia WooCommerce i na czym ona polega?

Wtyczka do WordPressa WooCommerce wydaje się być prostym sposobem na stworzenie sklepu internetowego. Wystarczy instalacja,… Read More