How to create basic shapes in SVG?

Hello guys,

You are welcome to our HTML series.

In the last segment, we learned the video tag, how we add the video to the HTML page, how we add source & file.

We learned different controls such as autoplay, loop, mute, and we added an image using a poster.

So, we added all these different kinds of attributes in the video tag.

I hope you performed the practical of the video tag.

Today's segment is based on HTML SVG.

From today's segment, we will focus on graphics, how we can add graphics, not images but shapes.

How we create the shapes point to point, we will do that using SVG.

So, let us start today's segment SVG.

First of all, the question that arises is

What is SVG?

The full form of SVG is scalable vector graphics, when we have to draw a shape or create a vector image on the web page, in that case, we use SVG.

SVG provides us with a form, and if we define the height and width of SVG we get a portion on the webpage and in that portion we can create any shapes we want.

If you know about computer graphics or the old systems or TVs, from the left-most corner of the screen the points used to get combined.

I can describe it using paint,

Let's say, here if we need to draw a TV or a system.

If this is the monitor or the tv screen, the pixels start from the leftmost corner and one by one the screen fills with the pixels until this point.

When we come to this point a new line starts and new pixels start adding similarly until here.

This is called the raster scale, its name is used in the slide as well, vector raster graphics.

In raster graphics, the screen gets generated when we generate a collection of pixels.

So these points we are getting here when we connect them in different ways we get shapes.

Let's say if I connect different points I may get a triangle, if I connect any three points here then also I can get a triangle, I can get a circle, or if I connect the points I can get a square here.

So, here in the raster vector scale we identify the points, connect those points in a linear way and when we connect these points in a proper way we get an image.

This image is called an SVG image and this is how we generate the SVG image.

Usually, SVG is used in pie charts, graphs and if you know we used to get X and Y coordinates.

X and Y coordinates mean X coordinate and Y coordinate let us see this in the paint itself.

New,

This is a line and similarly another line, so usually, the horizontal line is called X....

And the vertical line is called Y.

So, through the coordination of X and Y, we can create graphs.

If we mark 1 2 3 4 and move further on X,the same thing we have to apply on the computer screen.

So if we identify this as a computer screen.

This is my computer's screen and X and Y coordinates are provided here.

So, if I load a web page on the computer screen and I need to create an SVG image on the web page I will utilize these pixels 1 2 3 4 on the X and the same way the pixels 1 2 3 4 on Y and with the combination of both I can generate an image.

Make sure when we work with SVG it is important to be clear about pixels.

To clear pixels, this X Y coordinate method will be useful.

If you are already clear about X and Y coordinates you will easily be able to easily generate images.

I would request that if you are not clear, first you should learn this X Y coordinate method through any online tutorial.

As I have already explained in the example, we get the pixels starting from 1 2 3 4 to 200, 300 and we are going to learn to generate images in SVG further.

It will be easier to understand when we will perform the example, so let's go to the example.

The first example is the Circle.

I will train you to create SVG with the example of the circle.

Let me jump to the program.

HTML

SVG Circle

This is my program

(5 sec pause)

Okay

This is my program for SVG Circle.

Now, inside it, I first need to define that I want to create an SVG image.

To create an SVG image the first tag will be SVG, as you can see SVG is written here.

Let's type SVG, (5 sec pause) okay

So, the second inside the SVG is width and height.

If I want to generate an SVG image, so for determining where I want to generate this SVG image I have to identify a particular portion in the web page.

So, if the image is in that portion, it will be visible and if it's going out of that portion it will not be visible to me.

So, first, we have to define a particular portion to create an SVG image.

For that, we will use width equals, let's say currently we are taking 100 and we are taking the height 100.

Same as given here.

Save

When we run this program after saving...currently we cannot see and find anything.

The SVG has been generated, now we will add a circle to it.

The command for a circle is also "circle".

So let's say I add "circle" here, as the circle is one line.

We will need coordinates and a point for creating a circle.

As we know whenever we create a Circle there is a centre point, so we have to identify and define that centre point.

And a circle has a radius, that is, how much is the radius of the circle.

Same when we work with SVG, two attributes are given here CX, CY and R.

CX defines the point on the X coordinate, Y defines the point on the Y coordinate.

As we saw in the paint, this is the X coordinate and this is the Y coordinate.

If this is 1 2 3 4, "four" on x co-ordinate and 1 2 3 4 5, "five" on y coordinate. the point I get here on the intersection of these two is shown as 4 comma 5.

So, this 4 5 is the coordinate that meets, this representation shows that if we want to identify this point in the SVG or the screen so this point is at the 4th location on x coordinate and the 5th location on y coordinate.

So it is 4 comma 5.

The same thing is there in SVG, that this CX is the x coordinate in the bracket, CY is the Y coordinate and radius is 40.

So, if we see it in mathematical terms the XY is 50 comma 50 coordinate.

So we will identify this, let's say I write CX equal to 50, cy equals 50 and I will define R as 40 as given here, the circle will be of radius 40.

Let us save and run.

The moment I run, I am getting a black coloured filled circle. so if we see it here, the place my arrow is in the centre.

So this will be considered an x coordinate and this border will be considered as y coordinate.

Let me zoom out,

This is my x co-ordinate and this is my y coordinate.

On moving 50 points on the X-axis, means if we count 1 2 3..50 must be here because this is the centre point

Same way if I go down on Y, this must be 50 and if I drag it here, it will be 50.

So the point I am getting here is 50 comma 50. (11:35)

This is the centre, we generated an SVG of 100 pixels.

So the complete size of the SVG is 100, the width is 100 and the height is also 100.

The radius is becoming 40 till here from these 50 points

The diameter of the circle will be 80.

So let's say, if I increase the radius of the circle by 50 instead of 40, it will cover the whole SVG.

If I increase it to 60, so the circle is going outside the size of SVG that I defined, that is why some portion is visible rest has got cut.

This means the circle is going outside of the given width and height of the SVG.

There are a few other attributes, like a stroke that defines the border of the circle, so let's say I want a border of yellow color.

So, I will again give the radius 40, stroke equals yellow.

Save and run

So as you can see the color is black but it shows yellow on the outside.

Appears like a light of yellow colour, which means the stroke or the outer line of the circle is provided as yellow.

Next is the stroke width, which means how thick width I need for the circle.

Let's say here I add stroke width equals (4 sec pause) 4.

Run

The width is getting increased and I am getting the border of around 4 pixels.

The last attribute is Fill, the default color is black and if I want to change it.

I can take Fill equals any color.

Let's say I have taken red in the example, so we will take the same.

The yellow color is not showing properly, so we will change it to green.

Okay.

Here, you can see the border or the stroke is provided in green color and the inner circle is in red.

So, we have generated a circle using SVG.

So, we learned to distinguish and distribute the screen in X and Y coordinates.

How we identify the center point, this center point is with SVG, I defined the SVG of 100 pixels.

So if I want to fit the Circle of 100,100 pixels, I will have to accordingly mention the height and width.

So that is our circle,

So as written in the slide, CX, CY and R are the attributes of the circle tag.

When we are creating a circle, the Mandatory tags are CX, CY and R.

If we do not add a stroke, stroke width or fill, it is fine the circle will still generate.

But if we do not add CX, CY and R, the Circle will not generate.

Next important thing is, if we are creating any other shape like a rectangle then the attributes, CX CY and R will not work in a rectangle to create a rectangle it has their own attributes that we will learn today.

So the thing to make sure here is that the attributes defined for a shape can be used for that shape only.

We can use attributes like stroke, stroke width and fill because these are general attributes and can be used in other shapes.

But if we specifically talk about different shapes, here for the circle the mandatory attributes are CX, CY and R which we cannot use in ellipses and rectangles.

So that was how the circle is defined in SVG.

Next is the ellipse. Ellipse looks like a circle but its shape is kind of like an egg.

We will see how an ellipse is generated

Let's go to the same program, we will add the second shape in the same program of the circle.

So, as I gave the name "SVG Circle"

..

I will make it " SVG Circle, (4 sec pause) Ellipse and Rectangle".

Save

And I will update the name of the program as well so that it can be identified, SVG Circle, Ellipse and Rectangle.

Okay, the program is running...Okay

Now we have to add an ellipse, so we will do the same thing.

Firstly, we will generate an SVG…

And here in the example, we have given a larger width, because the ellipse is shorter in height and larger in width, in case we are generating a horizontal ellipse.

If we are generating a vertical ellipse, it will be larger in height and shorter in width.

So, currently, I will set 200 in width, let me give width as 500 and height as 200.

We are giving the values randomly because I have to generate a horizontal ellipse.

Save.

Now the next is an ellipse, so to generate the ellipse its tag name is also an ellipse.

As there was a circle for circle here it's Ellipse for Ellipse.

So, let's say here I take an ellipse, in a circle CX CY and R were mandatory, similarly CX, CY, RX and RY are mandatory in an ellipse.

The shape of the ellipse, let's see some images of an ellipse on google...

Let's say this is the ellipse, so this is Y coordinate and this is X coordinate, there are always two centers in an ellipse.

As shown here, if we see this image there are two centers in this image F1 and F2.

So, when we generate an ellipse, it is not generated with one center but with two centers.

That's the reason why there are two radiuses given in the ellipse tag, one is CX and CY and RX and RY which defines the radius from X and Y.

So, that's why when we work with an ellipse we have to work with two radiuses.

So firstly, the center is given as CX and CY.

Let's say I take CX and CY here, in the example we took 200 and 80....and then the RX radius from X coordinate is taken as 70, and RY is taken as 50.

Let us save it...and run

Okay, it is not running which means we have defined something wrong here.

Okay

Let me hard refresh the page, which means to refresh it with control and F5.

So it is showing by hard refresh, sometimes it happens if we are pressing F5 to reload, the page doesn't get reloaded but if we want to reload it forcefully by pressing control and F5 key together, the web page gets reloaded.

So you can see that the ellipse is generated as an egg-like shape.

So this is the code for Ellipse and it has been generated.

Now we have to add a few of its attributes as given here like style, there is fill, stroke and stroke width inside the style so we will add everything.

Style is CSS, style let's say "Fill", we are filling with yellow color, we will take the stroke as red and stroke width (5 sec pause) we have taken stroke width as 2 here.

Okay

Let us save and run it.

So the ellipse is shown as coloured we took the inside color as yellow and on the outside, we have given a stroke of red color.

Let's say, I want the radius that is 70 now to be broader, I will set 100 in its place.

So upon setting it as 100 I am getting the ellipse a bit broad.

If we want to make the ellipse horizontally broader we can increase the X radius, and if we want to make the ellipse vertically broader we can increase the Y radius.

Let's say I set 70 here and reload, it is increasing upwards.

So the ellipse is a circle if we set both of its radiuses’ the same.

Let's say, I set RX and RY as 50-50 and the ellipse will become a circle.

So if we define the same radiuses RX and RY we get a circle but if we want an ellipse we can play with the Rx and Ry.

CX and CY show that the generated SVG is 500 on top and 200 below the center or the coordinate inside the SVG is 200 and 80.

So this is an ellipse.

One thing left in the ellipse is the note written here.

CX defines the x coordinate of the center of the ellipse and the CY attribute defines the Y coordinate of the center of the image.

This means that this is my ellipse, so when I am hovering and currently where my arrow is the CX and CY and RX and RY are the horizontal and vertical radius.

So if this is my ellipse the horizontal radius is RX and the vertical radius is RY.

So this is our Ellipse.

The next shape is the Rectangle.

As you know we only need width and height for a rectangle that is why there are only two attributes in the rectangle width and height.

So let's say, this is my SVG

Inside this, I will add the rectangle (4 sec pause)

I will give a width of 300 in the rectangle and a height of 100.

Will save it.

You can see the rectangle is not showing because I have written the command incorrectly.

To generate a rectangle, we only need to write "rect".

So save and reload.

The moment I reloaded I got a rectangle filled with black color here at the bottom and Its border is also black.

This is our rectangle, you can see the SVG's width is 500 and height is 200 and the width and height of the rectangle are 300 and 100 means the SVG is 500 from which I have assigned 300 widths to the rectangle.

The height is 200, if we consider it from here to there, the SVG's height is 200 but I have given 100 as the height of the rectangle, so counting from the leftmost corner till 100 the rectangle is generated.

There are three attributes like stroke, stroke width and fill in the rectangle also the same as the circle.

So we will take the same.

Save and Reload.

So we are getting the same shape, stroke is green in color, stroke width is also there and the fill is also red in color.

So this is our rectangle.

So today we have learned three things in total.

Firstly, what is SVG the way it works and cleared its concepts?

After that, we learned to generate circles, Ellipses and rectangles in SVG.

So, as you saw when we generated the shapes they had their different attributes like CX, CY and R in a circle, XY coordinate and two radiuses RX and RY in an Ellipse whereas width and height in a rectangle.

These were the attributes.

So guys make sure when we generate such images we have to focus on their respective attributes and if we are using wrong attributes circle's an ellipse and an ellipse in a circle then we will not get a proper answer but if we are using proper attributes we can generate desired and proper shapes.

That was the rectangle.

In the next session, we will continue the SVG, but we will take points such as line, polygon and polyline and see how they are generated.

How we generate lines in SVG, how we can create a polygon means the shape that has more than one side and polyline means how we can generate multiple lines.

Guys, I request you to perform the practical and generate the shapes and graphics we learned today because it is very important and also a bit tricky.

If the program is running properly while performing the practical it is really well and good but If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

In the next segment, we will learn SVG line, polygon and polyline.

Thank you.