Animated SVG Icon – How to optimize SVG code and animate an SVG icon using CSS and Snap.svg library.

2014-10-31 • Plugins • Views: 1586

Working with SVG files is not an option anymore. With a huge amount of high definition devices out there, it’s not sustainable to export different sizes of the same bitmap assets and target specific device resolutions through CSS media queries. We need to rely on vector graphics whenever it’s possible.

Today’s resource is a very simple icon, that we imported as inline SVG into our index.html file. After having optimized the svg code, we tried to push it one step further by animating the icon using CSS and Snap.svg, which is a javascript SVG library created by the Adobe team. To be honest, it’s not that easy to animate svg files with the current browsers support status quo, but we learned some tricks along the way that we’re happy to share with you!

 

Website

Demo

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Shares