Create an SVG Animation using CSS and JavaScript

SVG, or Scalable Vector Graphics, is an application of XML to provide vector graphical information in a lightweight form. Unlike the other rasterized image format such as PNG and JPEG, SVG can be scaled without loss of image quality.

Creating SVG graphic can be designed using Adobe Illustrator and other graphic editing software or manually using XML/SVG DOM tags and settings to create element, shapes or paths.

Although these are XML graphics it is possible to put some animation on them which can be implemented in many different ways such as CSS, JavaScript and SMIL (Synchronized Multimedia Integration Language).

In today’s tutorial, I am going to show you how you can animation SVG using CSS and JavaScript using icons, text and vector graphics.

To export your Adobe Illustrator files to SVG, simply go to File->Save As and then put your desired name of the SVG format you want to export. On this example I’ll use “plant” and for the type format select SVG.

Next, the SVG option window will appear; make sure version SVG 1.1 is selected under profiles and then the link radio button was set selected on images location. For the CSS properties, select Style Elements. If you want to check the SVG codes you can simply click the “Show SVG Code” button on the bottom part. To finish the export process simply click on the “OK” button.

Using SVG in HTML

SVG as stated above is an XML based file and some browsers allow you to insert an SVG image on HTML. There are different ways to include SVG on HTML documents.

1. By inserting whole SVG XML codes on your HTML document

This is the quickest way to insert SVG images on HTML documents. Copy and paste SVG XML codes within the <svg> tag. If you have more than one SVG image that you want to insert this might be a little confusing especially if you are just getting started. See the example below:

2. By using an image tag

Another way to include SVG in your HTML documents is by using the <img> tag via src attribute. This is the same process of importing ordinary image format on your HTML tag. However, it doesn’t work sometimes and it’s hard to manipulate via CSS. Check out the example below:

3. By using the object tag

This is the preferred way to import SVG images. Using the <object> tag along with the <embed>, it renders the image in a vector format on different browsers. For the rest of this tutorial, were going to use this method to include our SVGs on HTML documents. See the example below.

Note: Although CSS and JavaScript can be used for SVG animation via inline and internal styling properties, it doesn’t guarantee that it is supported on all browsers especially on IE9 or below.

SVG Icon Hover Animation

For this part of the tutorial, I created three SVG flat icons that we’re going to work with. The first thing we need to do is insert them on our HTML document <embed> tag and then wrap them in an <object> tag.

Using the default SVG class provided by Adobe Illustrator when these SVG icons were exported, we’re going to add CSS3 transition property to create a smooth fill effect. The fill property is the same with background-color in CSS while the stroke property is the same as the border-color. To create a pop-out hover effect we’re going to use CSS3 transform scale and manipulate the behavior of the fill.

SVG Text Animation

The next SVG animation that we will look on is about drawing text SVG. The text.svg file contains the words “SVG TEXT” within a box. So basically what we’re trying to achieve here is that we will make the border rotate in a dash form and then add an animation delay before drawing the text.

We’re still using the <object> and <embed> tag here to insert our SVG file into our HTML document.

For our CSS we’re going to use stroke-dasharray and stroke-dashoffset to create a smooth line drawing effect. Stroke-dasharray attribute basically set up the flow of dashes and used to stroke paths while stroke-dashoffset determines the distance between dashes.

We will use CSS3 @keyframes to attain this effect and then set up the animation delay for the st1 class which is the actual class of the text svg itself.

SVG Vector Animation with CSS and JavaScript

For the last part of this tutorial, I created two vector elements. The first is a vase and the second is a plant image. The goal is to achieve an animation so that when we hover the mouse on the vase the plant will grow on the top of the vase element.

Using the <object> tag, we’ll have two elements here: vase.svg and plant.svg. You’ll notice below that instead of src, I use data attribute to specify the path of our SVG. This data attribute will be use by our JavaScript codes later on to attain the effect that we want. We’ll also wrap everything in an id container and then give the plant.svg an id of plantobj and vaseobj id for the vase.svg.

Next, let’s add styles on both vaseobj and plantobj. Basically the styles that we’ll be adding here is the position set up of our elements. Then on our plant element we’ll set up a CSS3 transform property of scale and then add some transition to create a smooth effect.

Finally, let’s add some magic to our vector elements using JavaScript to create the growing effect. First we’ll create a function to catch the SVG document. This will also test if it returns the document object produced by a frame document otherwise the value will be null. This will also make sure that we can make our cursor pointer when we hover on the vase element.

Now let’s add the juicy part. Using the window.onload event we will assign our ids on different variable. Then using the onmouseover and onmouseout we will add the class grow to the plant element to create a smooth growing effect.

More Tips

Though we can use <object> along with an <embed> tag to include an SVG image to our HTML document, developer Alexey Ten introduced some tricks on how we can use vector and provide a fall back for rasterized version of our SVG. This means using the <svg> tag we can use both the href and src attribute at the same time. Check out the example below.