Animated SVG elements are nothing to be intimidated by. In this write-up and demo we'll learn how to create a smoothly animated SVG icon using widely supported HTML, CSS and JavaScript. See the stand-alone demo here.

First, some basics. SVG, first defined in 1999, stands for scalable vector graphics and is based on mathematical points, rather than pixel units. The main benefits of SVG are scalability and increased independence from rasterized image files (for example: .gif, .png, .jpg files).

Now for the code for creating the animated SVG icon (see the stand-alone demo here).

The HTML and CSS are fairly simple, listed below in Figure 2. Notice the svg and path elements in the HTML are based on XML syntax. The svg element sets the bounds of the element and the path is a line composed of points. The "d" attribute of the path element stands for "description". The "M", for "move to", in the value of d represents the x and y coordinates where the path will begin. The CSS sets the size of a div containing the svg, and rotates that div continuously around its center in 2 second periods.

The JavaScript, listed below in Figure 3, controls the animated length of the path element. As shown in Figure 1 above, the path is actually composed of many 5 degree arcs arranged adjacent to one another. The arcs, or radians, listed in the "d" attribute of the path element are converted to an array. This is done to more easily add and remove radians from the path.

That's it! I hope you enjoyed this write-up, and please share it if you found it useful.

Figure 1 (below): The solid SVG path is actually composed of many five degree arcs arrange adjacently.

Figure 2 (below): The HTML & CSS for the animated loading icon.

<style> #container { width:200px; height:200px; -webkit-animation:spin 2s infinite; -moz-animation:spin 2s infinite; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } </style> <div id="container"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 200 200" id="loader" onload="drawCircle();"> <path d="M0,0 " id="arc" fill="none" stroke="#f75" stroke-width="20" /> </svg> </div>