close
CSSHTML

Umieszczanie i animacja ilustracji SVG

umieszczenie-animacja-svg

W tym artykule poznasz sposoby umieszczenia SVG na stronie. Każdy z przedstawionych sposobów ma zalety i wady. Od Ciebie będzie zależało, który najbardziej pasuje do Twoich potrzeb.

Ten artykuł jest wpisem gościnnym. Uważasz, że znasz bardzo dobrze jakiś temat związany z Web Developmentem i chciałbyś się podzielić wiedzą? Napisz na kontakt@devcorner.pl.

Pomysł na napisanie tego artykułu wziął się z ostatniego konkursu na stronie kodu.je, w którym brałem udział. W konkursie chodziło o dodanie animacji do obrazka wektorowego.

Rysunek, na którym będziemy eksperymentować:

twarz SVG

Spróbujemy go wprawić w ruch.

Najpopularniejszymi metodami dodawania grafiki wektorowej na strony są:

  • <img> jak każdy inny obrazek,
  • w CSS jako background-image,
  • wklejenie kodu SVG do HTML

Dodawanie przez <img> oraz background-image

Głównym problemem plików dodanych w ten sposób jest to, że nie mamy dostępu do ich DOM, a w efekcie nie możemy operować na nich przez CSS lub JavaScript. Na stronie Mozzila otwarcie przyznają, że JavaScript oraz zewnętrze zasoby jak CSS, zostały wyłączone w przeglądarkach Firefox z powodów bezpieczeństwa.  Można jednak wprawić w ruch grafikę, poprzez umieszczenie stylów wewnątrz pliku SVG.

Aby naszemu rysunkowi dodać mruganie oczu, do pliku między tagi svg wklejamy:

Zaletą tej metody jest mobilność. Możemy przenosić pliki SVG na odrębne strony internetowe, nie martwiąc się o kopiowanie stylów z CSS.

Minusem jest mieszanie ze sobą SVG i CSS. Przy dużych plikach, utrzymanie kodu będzie problematyczne.

PS. Jeżeli ktoś bardzo potrzebuje operować na SVG w <img>, dostępne jest rozwiąznie JavaScript, zamieniająca image na inline.

Wprost do HTML przez <svg>

Wystarczy skopiować kod z pliku wektorowego i kleić na stronę.

Teraz mamy dostęp do całego DOM obrazka i możemy swobodnie na nim operować przez zewnętrze pliki CSS oraz Javascript. Oszczędzamy przy tym na  HTTP request.

Często kod SVG może być wielokrotnie dłuższy od kodu strony, na której ma być umieszczony. Wyobraźcie sobie teraz, że do estetycznie sformatowanego, semantycznego dokumentu HTML dodajemy kod SVG.  Już HTML nie będzie wyglądał przejrzyście. Jeszcze gorzej, gdy mamy parę takich rysunków.

Użycie PHP

W tym wypadku zaciągamy do pracy PHP z backendu.

lub

Tutaj mała dygresja. Nie stosuję tutaj polecenia include, ponieważ przy nagłówku <?xml version=”1.0″ encoding=”UTF-8″?>, parser PHP wyrzuci błędy.

Na tak załączony obrazek działają skrypty oraz zewnętrzne arkusze stylów. Wadą tego użycia jest dodatkowe używanie PHP i mieszczanie jego kodu  z HTML.

Dodawanie przez <object>.

Moja ulubiona metoda. Element <object> reprezentuje zewnętrzne źródła.

Tutaj również działają skrypty oraz zewnętrzne pliki CSS. Moim skromnym zdaniem to najlepszy sposób osadzania plików SVG.

<embed> oraz <iframe>

Możecie się też natknąć na wyświetlanie SVG w tych tagach, ale są one o wiele mniej popularne od <object>. Pierwszy z nich <embed> jest odradzany z powodu luźnego podejścia implementacji do niego przez różne rodzaje przeglądarek. Jedna wyświetli zawartość, druga poinformuje, że zawartość wymaga wtyczki. <iframe> umożliwia osadzanie innego dokumentu w bieżącej stronie. Jak najbardziej można stosować do plików wektorowych, ale dochodzi zabawa z wielkością okna, obramowaniem i paskiem przewijania.

 

animacja w iframe

Podsumowanie

Na koniec mały test. W pliku face.svg umieściłem animację mrugania oczu, a w zewnętrznym arkuszu stylów animację ruchu głowy.

Porównanie animacji w różnych rodzajach dołączenia SVG

Zgodnie z oczekiwaniami, background-image oraz <img> nie mogą pobrać animacji ruchu głowy, ale działają style odpowiadające za mruganie oczu, które są wewnątrz pliku.  Każda następna działa prawidłowo. Przy <iframe> widać ucięty podbródek – należałoby ustawić parametry okna.

Aby w inframe i object głowy się poruszały w górę i w dół, należy podlinkować zewnętrzny arkusz stylów bezpośrednio w pliku SVG.
Można to zrobić nad tagiem <svg> poprzez:

lub  w środku <svg>:

W innym wypadku ruszają się tylko inline i php.

 

Ten artykuł jest wpisem gościnnym. Uważasz, że znasz bardzo dobrze jakiś temat związany z Web Developmentem i chciałbyś się podzielić wiedzą? Napisz na kontakt@devcorner.pl.

Tags : SVG
  • Kacper Pruszyński

    Rady co do animowania SVG od najlepszego w konkursie, szanuję i popieram inicjatywę a przy okazji gratuluję Guy Diamond 🙂

  • Paweł Chyła

    Mam pytanie, jak ostylować svg wrzucone w object ?? Na przykład chcę zmienić kolor ścieżki po najechaniu na svg.

    • Guy Diamond

      Na powyższym przykładzie możesz to zrobić np poprzez:
      svg:hover .hair {
      fill: #111111;
      }

      Musisz jednak dodać do pliku SVG arkusz stylów.
      Można to zrobić nad tagiem poprzez:
      xml-stylesheet type=”text/css” href=”animation.css”

      • Paweł Chyła

        Teraz rozumie, ale taka opcja wyklucza zmiany styli svg po najechaniu na coś innego niż to svg, czy się mylę ?

        • Guy Diamond

          Masz rację. W takim wypadku jak wyżej możesz zmienić tylko wewnętrzne części svg. Ale możesz to obejść przez js np:

          document.querySelector(“.svgClass”).getSVGDocument().getElementById(“svgInternalID”).setAttribute(“fill”, “red”)

  • Maciej Tatol

    Warto dodać że korzystając z webpacka i np. Reacta możemy rozszerzyć Webpacka o plug-in obsługujący import obrazków i wstawianie tak jak komponentów. Wynikowy html będzie zawierał obrazek inline A w kodzie będziemy mieć fajnie zaimportowany i wykorzystany SVG jako komponent