We used a size of 64×64 pixel for the icons.įor each icon we want a special animation to happen. The first thing we do is to create some SVG icons using an SVG editor like Inkscape. Older and non-supporting browsers will not be capable of all features. Please note that we are working with a modern JavaScript library for manipulating our SVGs. We want to try to do something similar using SVG icons with the help of Snap.svg. You’ve surely seen some great examples of animated icons using CSS transitions and animations like the Navicon Transformicons by Bennett Feely which were explained in this excellent collaborative tutorial by Sara Soueidan. With great libraries like Snap.svg the use of SVG assets becomes more easy and today we’d like to explore how to animate SVG icons. Despite it’s usefulness and powerful possibilities it’s still a mystery to many and when it comes to integrating it and using animations, many developers don’t know where to start. SVG has been one of the most underused technologies when it comes to web development.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |