Animierte SVGs

Bild

Seit meinem letzten Beitrag über den Einsatz von SVGs auf Webseiten ist knapp ein Jahr vergangen. Auch wenn mittlerweile immer mehr Webseiten auf SVGs als Icons und Grafiken zurückgreifen, fristet das Format noch eher ein Nischendasein im Web.

Nichts desto trotz möchte ich in meinem heutigen Beitrag auf eine gute Möglichkeit eingehen, SVG Animationen ins Web zu bringen.

SVG Inline einbinden

Sieht man sich ein beliebiges .png oder .jpg-Bild mit einem Text-Editor an, wird man auf folgende (oder ähnliche) Ansammlung von unverständlichen Zahlen und Zeichenkombinationen stoßen:

ˇ¬
»
Ã
"

ˇƒ


ˇƒ






ˇ⁄

ıI:ä9˛Ä4í iã<4É8Ä”9‡t°íòRaj(,¬`
ÓLáû4}ôAÁÒfl{∑ÓIkíÔ8@πÁ=â‡Ûfø≤ <Òw€¿rù5¿X 

Äcˆò7'ãh7–π6Ä6ŒqÀpÏ1π}0u;ºä¬˘ås!◊˘é£ôáf™¡eÉ•Ysk„‡c≥•[Òù47òå∞uä˙l»u∏xÄz31eŒSgŒÊMg¿o≤u-܈≥ô«≤Á/ßfl+úB¡û¥‡a⁄

Im Vergleich erkennt man einen deutlichen Unterschied bei einer SVG-Datei:

<svg x="0px" y="0px" width="60.2px" height="60px" viewBox="0 0 60.2 60">
  <circle id="circle" fill="#363636" cx="29.8" cy="29.8" r="28.8"/>
  <rect x="22.8" y="13.8" fill="#00CAE5" width="6.6" height="6.4"/>
  <polygon fill="#FFFFFF" points="29.5,35.8 29.5,22.8 22.8,22.8 22.8,41.8 29.3,41.8 40.6,41.8 40.6,35.8"/>
</svg>

Dieser XML-Syntax ermöglicht es, SVGs direkt in HTML einzubinden. Es handelt sich dann um Inline-SVGs.
Anders als bei einer SVG die über den klassischen Weg mit einem <img>-Attribut eingebunden wird, kann bei einer Inline-SVG sowohl über JavaScript als auch über CSS auf alle Elemente (sogenannte Nodes) der SVG zugegriffen werden.
In CSS Pseudo-Code könnte man mit der obigen SVG dann z.B. folgendes machen:
 

   svg #circle {
      transition-duration: 1s;
      transition-property: all;
   }
   svg:hover #circle {
      fill: #ffffff;
   }

In diesem Beispiel wird, sobald der User mit dem Cursor über die SVG fährt, der Kreis mit der ID „circle“ von #363636 auf #ffffff faden.
Die Animationen sind natürlich nicht auf einfache Farbanimationen beschränkt – alle CSS3 Animationen (Unterstützung des Browsers vorausgesetzt) sind auch mit Inline-SVGs möglich.

Unterstützung im Browser

Auch bei der Unterstützung von Inline-SVGs bei modernen Browsern sieht es sehr gut aus.

Bild

Ausblick

SVG bietet eine einfache, effektive und vor allem sehr performante Möglichkeit, aufwendige Animationen auf Webseiten einzusetzen, ohne dabei auf Kompatibilität verzichten zu müssen. Wie auch in meinem letzten Beitrag bleibe ich bei meiner abschließenden Meinung, dass SVG die Zukunft von Grafiken im Web darstellt – auch wenn die Verbreitung zugegeben schleppender anläuft als noch letztes Jahr angenommen.