SVG (Scalable Vector Graphic) files provide many advantages over other image formats with the key features of them being scalable for different screen sizes.
Websites use different types of images to display photos, illustrations, infographics, icons and logos. For icons and logos it has been common practice to use PNG files primarily because they can support transparent backgrounds. But there is an alternative in the form of SVGS because as the name suggests they are scalable.
Advantages of SVGs
So I have moved to having a collection of SVG icons because they provide the following advantages: 1. They are usually a very small size 2. They are scalable by design 3. They can be added to a page in a variety of ways – as an image, as a shortcode and as HTML 4. Using the Custom CSS feature you can modify the size and colour. 5. You can fine tune colours and add gradients by editing the SVG 6. You can do animations with them using CSS or the GSAP JavaScript Library
An SVG Library
I have been building a collection of SVG icons that I use over and over again on websites. While Elementor provides a lot of “icons” by using Font Awesome I am not a fan as it loads a large font file if you just use one icon on a page. There is the ability to add icons using Fontello but it is not easy to extend them with new icons.
Animating with GSAP
I have been using GSAP to animate my own XMS Services Logo where I have been able to rotate the letter X and change the text colour to give a subtle animation. DSAP has the advantage of being able to coordiante multiple animations to get the desired effect.