SVG

Scalable Vector Graphics. Can be used as a image, or as a entity that can be animated part by part.

These parts are actually paths inside a svg element.

SVG can be created using Adobe Illustrator, Inkscape, Vector, Sketch etc. There are also a lot of online tools available for the same.

Easiest way out is to use SVG’s created professionaly, if we are looking for professional level graphics. There are lot of repositories online from where we can download SVG files for free.

The best among them is unDraw. Download files that suit your need, and then edit the svg files using Figma which has the capabilit to seperate a vector file into individual paths. which can be then grouped to be later styled/ animated using css.

SVG Sub Projects

SVG Animation using CSS

Good Reads

How to use SVG - CSS Tricks
SVG Icon System - CSS Tricks
SVG Properties and CSS - CSS Tricks
Just everything SVG