Animated SVG Icons: SVG Stroke Animation with jQuery

How to use animated SVG on your website? How about animating eye-catching icons on websites with jQuery and DrawSVG plugins?

Since SVG icons are scalable vector graphics, you can use them on your webpage without any distortion. And instead of using static icons as standard, we can use these icons is an animated way as you see them on the screen.

And we will do this with the DrawSVG plug-in. Let’s create an index.html page and insert the standard HTML5 codes in the page. There will be two scripts that we need to add here. The jQuery line is calling the jQuery file on our page. We will use the other one to call the DrawSVG file into our page.

https://code.jquery.com/jquery-latest.min.js
https://cdn.jsdelivr.net/jquery.drawsvg/1/jquery.drawsvg.min.js

How to Create SVG Icons?

Now, we will add the SVG codes inside the page. For this, let’s first create a Wrapper Div and we will add SVG codes in between. There are several ways to do this. I will use Illustrator in this tutorial.

For example, I have such vectors and I want to use these vectors as SVG on my website. I choose one of them and create a new file. The size of the file doesn’t matter. Here I’m pasting the vector graphic. Here is what we need to pay attention to.

In the graph on this page, we only see the outline. So I also need to remove the inside of this graph and leave its outlines. I select the image, set to Fill value in Appearance to None. In this way. I’m not assigning any color and the Stroke value represents the outline.

I choose the white color. I leave the thickness value as 1. After preparing our vector, I click the Export option under the File menu and click to Export As button. Here we can directly click on the export button. We will not save the file to our computer anyway.

You will need this window. We changed the option in the Font section to Convert to Outlines and change the Image section to Embet, When we select these options and click the Show Code button, it will give us the code.

As you can see this is a code made with an SVG tag. And I copy this code with Ctrl + A and Ctrl + C. I can close this window and paste it here. After pasting the SVG code here, we should be able to see it on the screen, but since the font is white, we will add a style file.

You can also edit to an external style file. Since I will write less code, I can edit to this page. Let’s assign a background to the body tag and the positioning to the SVG tag. I’m adding the codes like this and let’s set the width value to 400 to reduce its width. As you can see we managed to place this SVG file in the middle of the page.

body {
  background: #1e075f;
}

svg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 400px;
}

DrawSVG JavaScript Code

This SVG file is not taken from any image, but purely from the codes you see on the left. We have SVG code. We have imported our files, and now we need to add some JavaScript code. I click under the div tag. I’m adding these codes.

When I add these quotes and click the Save button, the script will not run because we pulled it from GitHub. Let’s pull this from JS Deliver. After updating this code, I click the save button. As you can see, our letter is formed is an animated way. I lower the width value a little more, so it will look nicer.

var $svg = $('svg').drawsvg();
$svg.drawsvg('animate');