How to draw shapes using SVG in HTML5


We know SVG or scalable vector graphics is a powerful way to represent graphics in browser. In our blog today we will create various shapes using SVG. Our shapes include Star, Concentric Circle, Rhombus, Parallelogram and Trapezium. Let us start with our coding

Step 1

Create a HTML page and write the following for concentric circles

here is the code above to draw a circle with center coordinate as cx and cy can be defined but if they are not defined they are considered as (0,0). r is the value of the radius. Stroke width is the width of the border. Fill is the color to be filled inside the circle,I take it as white to show concentricity.

The above is the second circle with bigger radius to make it concentric with the first.

Step 2

We now will write the code to draw a Star.

In the above code we draw polygon points to draw the shape of the star.

Step 3

To draw a parallelogram we do the following

/M simply means move to the initial point means starting point.
//L simply means to draw a line from initial point to the point defined.
//z is used to draw closed path.
//We can design any figure simply by adjusting the value of coordinates of lines we defined.

Step 4

Draw a Rhombus similar to the following code

we draw a trapezium like the following


The output will be the following