nou

svg simple animations using css

Sparisoma Viridi
2 mins read ·

Short intro to SVG and some simple examples

intro

As an open standard developed by W3C, SVG image has several advantages over raster image (e.g. JPG, GIF, PNG), which are scalability, interactivity, easily editable, compact file size, and SEO friendly 1, where Its interactivity feature can be performed using only CSS 2 or further advanced with JS 3. There are already available softwares to animate SVG image using CSS only and also with JS 4. But since it is XML-based you can make it from scratch using any plain text editor. Common use cases for animating SVG with CSS are for icons, data visualizations, interactive states, stickers and emojis 5. SVG is also a solution for consistency in displaying images on various and diverse device screen settings, since it can create a visual interesting look for websites without additional load time burder 6.

In this post only CSS will be used in creating SVG animation but not yet with JS. How to advance it with JS will be in another post.

notes

  1. Sean Tierney, “5 Advantages to Using SVG Files”, Explain Everything, 5 Oct 2017, url https://explaineverything.com/blog/uncategorized/5-advantages-using-svgs/ [20240409]. ↩︎

  2. Rufai Mustapha, “How to Make a Clickable SVG Map With HTML and CSS”, freeCodeCamp, 9 Mar 2023, url https://www.freecodecamp.org/news/how-to-make-clickable-svg-map-html-css/ [20240409]. ↩︎

  3. Stacey McKnight, “Making an interactive SVG map with OO-JavaScript”, Medium, 9 Apr 2021, url https://medium.com/p/2c5abc73481c [20240409]. ↩︎

  4. Neha Kaushik, “Top 10 SVG Animation Generators for Stunning Web Graphics”, Geekflare, 22 Dec 2023, url https://geekflare.com/bes, t-svg-animation-generators/ [20240409]. ↩︎

  5. Hope Armstrong, “How to animate SVG with CSS: Tutorial with examples”, LogRocket, 11 Jan 2024, url https://blog.logrocket.com/how-to-animate-svg-css-tutorial-examples/#common-use-cases-animating-svg-css [20240409]. ↩︎

  6. Juan Calou, “A how-to guide to SVG animation”, Tiny, 29 Aug 2022, url https://www.tiny.cloud/blog/guide-svg-animation/ [20240409]. ↩︎

Tags: