How to Create SVG Images

How to Create SVG images)

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics.

In HTML5, you can embed SVG elements directly into your HTML pages as images and use them for cool effects such as animations.

In this tutorial we are going to create a square image using SVG and animate it by sliding across the screen from the left to the far right on mouseover.

As the square begins to scroll it has a blue background color but once it reaches the far right corner the background color changes to red. You can view a live demo of the finished sliding square project here.

Feel free to download the code for this sliding svg square image project from github.

In your project directory create three directories and the index.html file as shown below.

This will be the contents of your index.html file. We use the HTML <object> tag to load our SVG image. There are many other ways of loading SVG images but this is the most practical because it will enable us to manipulate the image using JavaScript.

In the CSS file we specify the SVG image container to span the whole width with a margin of 20px on both left and right. This should be the contents of your slider.css file.

An SVG image file is an XML document and can be loaded into a web page like other image files such as .jpeg, .gif e.t.c. We will create an empty SVG image file that will contain our square, so that we can manually create the square later on. An SVG image begins with an <svg> element.

Now that all of that is set, let’s get into the JavaScript file and begin drawing and manipulating our square image. First we will want to wait till the whole page is loaded before we can get hold of the object containing our SVG image.

Every SVG is an XML document and therefore it exposes a DOM that we can manipulate just like any other HTML element. This will particularly enable us to create new shapes by adding new nodes.

We reference the <object> tag containing our SVG document to allow us to manipulate the DOM nodes. The <object> tag contains the contents of the SVG document. To get the contents of the SVG graphic we use the contentDocument property.

Let’s create a square element on our SVG graphic. We will create a square by first creating a rectangle then assigning the same value for both the width and height. For this we use createElementNS, NS stands for namespace and it must be passed the SVG namespace.

We can now set the coordinates and take note that we are using setAttributeNS method rather than the usually setAttribute. This is because we are using a namespace that is different to out HMTL.

The first argument to the setAttributeNS is the namespace but we use null because we have already referenced our SVG. So we set the “x” and “y” coordinates to 0 so that the top left corner of our rectangle begins at the top left corner of our SVG vector graphic.

Similarly we set the width and height properties to 50 to make it a square. You can assign any value of your choice to vary the size or shape of the image.

Lastly we specify the “fill” property which defines the background color fill for our shape.

To place our square on to the page we first reference the <g> tag with id of “main” in the SVG vector graphic document then we appendChild to it and pass in the square object. All going well, the green square should now appear on the page.

Finally, we need to set a mouse hover event listener to our newly created square image so that we can be able to animate it by sliding it across the screen to the right until it reaches the far right.

We define a variable xpos to store the current value of the x coordinate of the square in the vector graphic. To ensure unexpected behavior, like accelerated animation by the mouseover event being triggered multiple times, we remove the event listener immediately after the first trigger.

After removing the event listener we call the slideSquare() function while repeatedly calls itself until the square has reached the far right. We increment the x coordinate 1 unit at a time for smooth transition.

When defining the SVG graphic in the image.svg file we specified the x coordinates to range from 0 – 299. Since the width of our square takes up a space of 50 coordinates, we move the top left corner up to the position less 50 of the total graphic width. This ensures our square doesn’t move outside of the graphic area.

Using the setTimeout function, we make the function call itself after every 20ms unless it has already reached the farthest right.

Once we are at the farthest right we change the background fill color of our image to red.

Below is the full contents of the file.

View a live demo of this project or download the source code on Github here.

There are various ways of implementing a sliding square on the screen on mouseoover. Possibly you could just use CSS and HTML or the jQuery animate function.

I chose to use this long method to get the feel of plain JavaScript and SVG DOM manipulations with JS.

What do you think about the use of SVG in HTML5? Share your thoughts below.

Found this article useful? Please share in your social networks.

About the Author Geoffrey Barnes

Geoffrey is an experienced software developer and open source evangelist. When not coding he writes and talks about current technology trends, small business tips and developer productivity hacks. He is no coffee addict.

follow me on:

Leave a Comment: