Learn to Create Graphics in 5 Minutes (HTML5)

Ever wondered how people create all those wonderful graphics and animations? Creating graphics in HTML5 is simple. You can learn the basics in a few minutes.

Scalable Vector Graphics

SVG helps you create two dimensional graphics easily. Almost all modern browsers support SVG. Many tools are available to create graphics automatically, but our purpose is to teach you SVG. You will learn to create a circle, a rectangle and also to add some text.

Defining the Boundary

Before we can do anything we need to define a viewport (an area where graphics will be displayed). The purpose of viewport is to define boundaries. Here is the code:

<svg width="400" height="100">
</svg>

We define a viewport of dimension 400 pixels x 100 pixels. All our drawings in this article are going to be in this viewport.

Circles

Now I am going to teach you how to draw a circle. Say, we want to draw a circle of radius 40 pixels. Here is how we do it

<circle r="40"  />

Of course we need to add the circle to the viewport, so the complete code will be:

<svg width="400" height="100">
<circle r="40" />
</svg>

You can create an html file and embed the above code in it to test. Your browser should support SVG. Recent versions of almost all browsers do. If that is too much work for you, you may use our HTML simulator to try out the code. The link opens in new tab/window. If you have trouble loading, here is the link: http://www.cstrends.com/?q=htmlsim .  Just copy paste the code you want to try to the HTML simulator and click the Run button.

When you click run, If everything works, you will see:

Well, that's not really a circle!

Oh! our circle got clipped - we see only quarter of the circle. Why did this happen? If you don't say anything svg assumes that the circle's center has to be centered at (0, 0). Note (0, 0) is the top left corner of the viewport. How to move the circle to the middle? Try the following code:

<svg width="400" height="100">
<circle cx=200 cy="50" r="40" />
</svg>

We can specify the center by specifying the attributes cx and cy.

How do I change the color of my circle?

We can use the attribute fill="yellow" to change the default color.

<svg width="400" height="100" >
<circle cx=200 cy="50" r="40" fill="yellow" />
</svg>

Let us make a face by adding two more circles for eyes:

Just play around with cx, cy, and r to get the size and location of eyes as you like. Note svg draws objects the order you specify them in the code. So if you ask svg to draw a big circle and small circle with the same center, you may not see the small circle!

Ok, now we have to add a mouth. Shape wise, mouth is more like an ellipse than a circle. Here is how we draw ellipse? Below is the tag:

<ellipse cx="200" cy="70" rx="10" ry="5" />

In the above example, the ellipse will be drawn centered at (200, 70), i.e, 200 pixels down and 70 pixels right of the top left corner of the viewport. The ellipse will have an x radius of 10 pixels and y radius of 5 pixels. Here we complete the face:

Our code is below:

<svg width="400" height="100">
<circle cx=200 cy="50"  r="40" fill="yellow" />
<circle cx="180" cy="30" r="5" />
<circle cx="220" cy="30" r="5" />
<ellipse cx="200" cy="70" rx="10" ry="5" />
</svg>

Rectangles

Now we want to add rectangle border to the picture. The svg tag for drawing rectangle is, <rect>:

<svg width="400" height="100" >
<rect   x="5" y="5" width="390" height="90" stroke="pink" stroke-width="4" fill="lightgreen" />
</svg>

The above code draws a rectangle starting the top left corner at (5, 5), with width of 390 pixels and height of 90 pixels. It also will create a 4 pixel wide border with stroke color of pink. Finally, svg fills the rectangle with light green color.

So this is what we got:

Adding Text

Let us add some text to the picture above. The svg tag for adding text is: <text x=20 y="50" r="50" fill="purple" font-size="30" > Smile! <text>

The text will be displayed starting at coordinate (20, 50) in purple color with font size of 30 points.

Image Credits