SVG's have continued to be a big visual element in progressing user experience in recent years, and they don't show any signs of slowing down. These 2D vector-based animations have all the signs of what the future of web is looking for. Quick to render, infinitely scalable, interactive and SEO friendly.
As the progression and popularity of SVGs has grown so have the resources. By using some of these sweet tools available you can get a animated SVG up and running quickly.
A great tool for creating animated SVGs is Vivus.js and Vivus Instant.
Here is an example of how I was quickly able to turn a logo I made for Ashley Stevens Design into a SVG animation.
Vivus.js
First I made and outlined version of the illustration with Adobe Illustrator, and exported it as an SVG. Then I used the SVG OMG tool to clean up the SVG code so it is easier to work with. Finally I used the Vivus Instant tool to animate my SVG.
The vivus Instant tool will create some CSS to enhance the animation affects. For this example I deleted the created CSS styles and use the Vivus js manipulation options.
See the Pen Animated SVG With Vivus.js by Jeremy Faucher (@jeremyfaucher) on CodePen.
Vivus works by using the path tag which is great for illustrators who work with line drawings. You can simply change the order of each paths to run from first path to last path. If you have some basic JavaScript experience you can use Vivus.js options to quickly take user experience to the next level.
Load The Background Color After The Path Finishes Running
Loading content is becoming a big feature in web design especially as single page applications are doing a much better job at it. Being able to introduce content in a more creative and expected way continues to challenge designers and developers. Checkout this example by codrops.com that is one of the inspirations behind Vivus.js that is sure to blow your mind.
To create the loading effect of a page element like the examples at Codrops, we can use vivus.js and some simple css. There are also other options for creating this effect like the CSS mask-image syntax that works similar to the background-image syntax.
See the Pen SVG with Fill CSS by Jeremy Faucher (@jeremyfaucher) on CodePen.
For this example I set the SVG path to fill="blue" and used the CSS fill-opacity: 0; to hide to background color while the SVG is running. Then with vivus.js using the callback option we can use classList to add the class with fill-opacity: 1; after the path finishes running. There is no need to use jQuery. Here is the reference I used from the vivus.js GitHub.
Conclusion
SVGs can be complicated as they are XML-based files that can be integrated with HTML. Still we are able to use them with img and object tags as well as inline. So they may seem a bit foreign at first, but quickly become a great feature of web design.