SVG Animation for Website Design

Hey there!

It’s been a while since I’ve made a post so I’ll showcase a project we’ve been working on.

See the Pen Interactive SVG/CSS Draw Animation by Tom Watkins (@TomBismuth) on CodePen.


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.

SVG files offer a huge advantage over conventional jpg/gif/png as they can be styled dynamically in CSS from their fill to their stroke width. Javascript can be used to add a variety of event triggers that surprise your users when browsing with your animations and image manipulations. (click our logo after the animation has completed to see).

 

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.

  1. Create a web friendly SVG in Adobe Illustrator or another graphic design suite
  2. Open your .svg file in your favorite text editor, copying the HTML elements to your page
  3. Add new classes via CSS relating to your animation
  4. Add actions via javascript/jquery if necessary relating to the triggers or quirks for 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.

 



Leave a Reply

Your email address will not be published. Required fields are marked *