In this CSS Atoms tutorial, we are going to teach you how to create Scalable Vector Graphics (also known as SVG) and apply some advanced css tricks to make it animate. Why use SVG’s? Plain and simple. They are scalable and add very little data to the overall file size. Unlike images, SVG’s can resize to any width and height without loosing clarity or rasterizing. Though they may not be as detailed as most images, they serve a good purpose as icons and can replace unwanted images that are used as icons.

There is a downside though. SVG is not supported by all browsers (notably IE and older versions of browsers), so take this lesson as a learning session and avoid using svg’s unless you plan to have a fallback that will replace the svg’s with an image.

Here is an example of what we will be working on.

Animated SVG Icons

Creating an SVG icon

First we must go over how to create an SVG. Yes we can code the icon from scratch and use a very long and daunting revision process but there is a much easier way. It is best and highly recommended that you use a Vector Editing program such as Adobe’s Illustrator (which we will be using in this lesson) or Inkscape. Both make it easy to create detailed vectors and easily retrieve the HTML code necessary to display the icon on a webpage.

If you do not have access to these programs, that’s OK. Your trusted source Google provides a nice SVG editor on the web at http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html. Here you can make edits and get the SVG code necessary to complete this tutorial. You can also find any icon in SVG format on the web, open it in a text editor program like Notepade or Text Edit to retrieve the SVG HTML code.

Step 1

Let’s start by creating a simple one color icon in Illustrator. Make sure that the graphic is one solid shape and not just grouped together. Now go to Save As, name it Icon and under Save as type select SVG and click Save. Another window will pop up similar to the image below.

Animated SVG Icons 2

Make sure the Type is SVG and click the SVG Code button on the bottom. A webpage will open up display the HTML code you will need to display the SVG on the web page. Go ahead and copy/paste only the code from <svg> to </svg>. You can use the code provided below to help setup your html document and get the Atoms Network icon for you to practice with.

Save and preview the html in your browser and you will see a nice icon similar to the one below.

Animated SVG Icons 2

You’re probably thinking “Wow that’s a lot of numbers”. To put it the simiplest way possible, each integer is a plot point and direction the draws the line on the web page. The more angles and points you have, the longer the html will be.

Step 2

Now that we have our icon and HTML in place, its time to use CSS to animate our icon. We have two options to animate our icon, we can use Transition and the Animate property. Transition will not give us enough control this time to spin and more our icon, especially since we want to repeat this animation an infinite amount of times (just for fun). As a short reminder of how the Animate property works, we must create Keyframes that will act as goals for our icon to accomplish (ex. halfway through our animation time: move 20 pixels left while rotating). We must also give our animation a name which we can then call it inside of our ID’s properties. Here is the CSS animation to make our icon rotate 2000 degrees while moving right 800px.

To link the animation to the SVG icon, simply add id=icon inside of the <svg> tag. Save the document and view it in your browser and you will see your scalable SVG icon in action.

Here are a few things to take notes on in this bit of code. We chose to name the Keyframe animation “iconic” which is called inside of the #icon selector. We have to “breakpoints in our keyframe animation. Animating an object must have a point A and point B. In this case point A is 0% (the beginning of the animation) and point B is 100% (the ending of the animation). Inside each keyframe breakpoints are set rules that the icon will follow. Inside of the #icon ID selector are the time frame and animation repetitions. You can control the speed and paramaters of the animation and we suggest checking out W3 for more options.

Wrapping It Up

Your final document should look like the code snippet below.

Although SVG objects are not fully accepted yet by all web browsers, it is important to get a head start and learn how to use them now. They are a very beneficial tool and very easy to implement. SVG’s are a very popular trend now and when combined with animations, you have a very flexible and easy tool to really impress clients and users.

Download Source Files