SVG Animation for Website Design
It’s been a while since I’ve made a post so I’ll showcase a project we’ve been working on.
SVG animation is especially useful for website design as it can be used at a low performance impact on pretty much any page. Negating the usage of more laggy slider addons.Animations like this can offer lightweight moving image solutions for pages and .SVG files in their static form are vastly superior for website development due to the infinitely scalable nature of the images, at least when it comes to logos and other simple shapes.
All design companies should offer .SVG logos as part of branding packages. Failing that you can find experienced designers that can convert your images for you. For more details on the applications and advantages of using these files give this article a read
How does this work? There are much more in-depth guides, but here’s a quick rundown.
- Create a web friendly SVG in Adobe Illustrator or another graphic design suite
- Open your .svg file in your favorite text editor, copying the HTML elements to your page
- Add new classes via CSS relating to your animation
Feel free to use the CSS/JS from my codepen as a starting point, just change the #ID and .Class elements to match your .SVG project.
You can use your svg animation for a landing hero image, or as part of your header. If the file is exported correctly it should be responsive and easily scaled. You can find a plethora of other ideas for animations on codepen.