Below are some examples of SVGs being used across the web that I think work well and really add to the experience.
Lighthouse Brewing Company
The Lighthouse Brewing company’s website utilizes animated SVGs on their homepage in the large hero image area to help bring the illustration to life. Just adding some subtle motion to a few of the graphical elements really draws attention and gives the feeling of items actually floating in the water.
On the Space Ape website, they utilized SVGs for a majority of their websites graphics, but the one that really stands out is the rocket as you scroll down the page. In addition to the rocket actually blasting off as you scroll, it has some subtle flame/smoke animations, which I think are a nice touch. This is a strong way to introduce users to your website’s content as you scroll and explore down the page.
Apex’s website uses SVGs to help tell a story with their content. As you scroll down the page, the text and shapes animate. This draws attention to the sections of the homepage. These shape animations really help make the content stronger and aid with what the content is trying to convey to the user.
James Ross Consulting
On James Ross Consulting, the line animations and the unique animated icons really aid the content in telling a story. This is a great example of how subtle animation on icons can really make things pop and help with the mood of the website.
As you can see, SVGs are the perfect file type for basic icons and vector web graphics. They can really help amp up your content and draw attention to certain elements. In addition to their low filesize, they can also be quickly manipulated and updated with ease by just using simple CSS.