Simple animation with SVG

Sparisoma Viridi
1 min readJul 6, 2023

--

SVG (scalable vector graphics) is a web-friendly vector-based file format to render two-dimensional images on the internet (Chris, 2022). By using SVGs, the images can be scaled up to any resolution, which comes in handy for web design among plenty of other use cases (Morris, 2023). An SVG file can offer powerfull graphics at any scale, speed up the website, and imporve SEO (Juviler, 2022). Animation in SVG can performed using CSS (Armstrong, 2022) and CSS+JS (Bece, 2023), and also using animation elements, that were intially define in the SMIL (Soueidan, 2022). One of popular application to edit SVG file is SVGator (Dobrucki, 2021). There are some examples of animation that can be refered as inspiration(Agus, 2020). And the animated SVG can also be converted to GIF using some online converters (Mitchell, 2023). Steps to create SVG and animate it will be given here shortly, where the results are display in GIF format.

--

--