Animierte SVG-Dateien mit CSS kreieren
Kommentare

Animierte Bilder sind heutzutage der Renner im Web. Das Internet ist voller lustiger, obskurer, sinnfreier Gifs und Memes, die für den kurzen Zeitvertreib sorgen und stets leicht und locker zu konsumieren

Animierte Bilder sind heutzutage der Renner im Web. Das Internet ist voller lustiger, obskurer, sinnfreier Gifs und Memes, die für den kurzen Zeitvertreib sorgen und stets leicht und locker zu konsumieren sind. Wer selbst animierte Bilder kreieren, nur statt GIFs zu erstellen platzschonender und flexibler operieren möchte, der sollte vielleicht auf das SVG-Format umsteigen. Das XML-basierte Dateiformat zeichnet sich unter anderem durch eine starke Lesbarkeit und Kompatibilität aus und weist keine Qualitätsverluste bei der Skalierung auf. Es gibt so einige Möglichkeiten, animierte SVGs zu erstellen: Zum Beispiel kann man Libraries wie Snap.svg oder SVG.js benutzen, es gibt den -Tag, der im SVG-Code integriert ist, und dann gibt es die Möglichkeit, animierte SVG-Bilder direkt über CSS zu erstellen. Interessiert? Bei den Kollegen von den CSS-Tricks findet ihr ein Tutorial, wie schnell und easy animierte SVG-Dateien mit CSS kreiert werden können. In sechs einfachen Schritten zeigt euch Chris Coyier, was ihr alles berücksichtigen müsst.

Aufmacherbild: kid boy chalk drawing on board von Shutterstock / Urheberrecht: Oksana Kuzmina

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -