How to create Line, Polygon, Polyline in SVG?

Hello friends,

You are welcome to our HTML series.

In the last segment, we learned about SVG and how we can add graphics, and how we can add shapes like circles, ellipses and rectangles by using SVG on the web page.

I hope that you tried these three shapes we learned in the last session, and you were able to perform them properly.

In today's session we are continuing SVG, but today we will see how we can add some new shapes through SVG like lines, polygon, and polyline means how we can add more than one line.

So let us start with SVG line,

Here I have written the program, and what the SVG line program looks like.

Firstly we will see that if we want to generate a line in XY coordinate how it looks.

In the last segment also, with the help of X and Y coordinates, we checked how it looks.

Let's say if I generate an SVG platform of 200 and 500 height using the SVG tag, the SVG will be like this and its upper height will be 500 and lower height will be 200.

Somewhere I have generated the SVG.

Here we can get the points in the SVG like 1 2 3 4 dots dot to dot, nth time 198, 199, 200.

Same on the Y coordinates I can get the points like 1 2 3 and here 198, 199 and 200.

So, if we consider the SVG in pixels, it is distributed as 1 2 3 4 pixels,

Here, where both the 1 matches is the first point, where both 2 matches, is the 2 point, where 1 and 2 matches it's the (one-two) points, similarly we get different points on the SVG.

Let's say if I want to draw a line on the SVG, to draw that line two coordinates are needed: its initial coordinate and the coordinate where the line is ending.

Let's say, for example, my initial coordinate is this one-two and there must be 32 where the line ends.

So if I want to draw a line like this in SVG, I will need the coordinates of two points where the line starts and ends.

If the initial point is X1 and Y1 and the last point, end point is X2 and Y2, I will need 4 points in total X1, Y1, X2 and Y2. With the help of these four points, I will be able to draw a line in SVG.

Let us come to our program.

In the program we define the SVG with height and width, so to draw a line we need four things X1, Y1, X2 and Y2.

So let's say we perform it in a program,

Firstly we will go to the HTML.

Now this is our program "example for line…polygon.. and polyline"

Let us save it, it should be like SVG line, polygon, polyline.

So this is our program.

Now we will go to the SVG, we will add SVG...

Here, it is 210 and 500

So width, sorry height will be (10 sec pause)

The width will be 500.

So my SVG is generated...

This is my program "SVG line, polygon and polyline" let us run it.

The program is running.

Now we will add a line to it, so let's say the tag for the line is "LINE" I will add X1 in the line as given here X1..0, Y1, 0

This means my first point is the first point of the SVG (0,0).

If I take X2.. as 200 & Y2 as 200 and save it.

And if I run this program, I cannot see anything and I am not even able to understand whether the program is running or not.

What I will do for this is, that I will check if I wrote anything incorrect in the program.

But no currently everything is correct.

It means the line is drawn but it is not visible, we will add style for this.. (05:53)

Style inside which the first is stroke. let's say I take it as blue

Run after saving it

The moment I added the stroke colour the line is showing to me now, which means the default colour of the line is white.

So the white line is not visible on the white screen, but when I gave colour to the stroke, let's say blue the line is getting visible now.

So this point in SVG is (0,0) and this point is (200,200) so we have created a line that connects (0,0) to (200,200).

Now, there is stroke along with stroke in the line, these are the points of CSS and we will learn them in CSS also.

Let's say, stroke.. width which indicates how thick the stroke must be, so let's say 2.

And when I run it, the line is showing a bit thick now.

I have zoomed in and gotten the SVG as it is and the line is generated as large as starting from (0,0) to 200.

So that was all how we can add a line in SVG.

If I want to create a horizontal line I will make X1 and X2 the same.

Let's say here

And run it, so I am getting a straight vertical line only the Y is changing.

And if I want to make it horizontally the same, I will write 200 here and 0 here.

..

Run it

And now I am getting a horizontal line

If I want the line in between, let's say I write 50, 50...

And here in X I will write 200 and 50 and save and run it.

So here I am getting a horizontal line at (50,50) and here (250, 50).

So when you are working with SVG, you just need to identify the points and coordinates.

As you start identifying coordinates you will slowly with practice get the judgement of how you can generate different shapes, lines, from where you need to take them.

So that was our line.

The next is the polygon in SVG.

What is a polygon?

Polygon is usually a graphic or a shape in which a minimum of three sides are required.

I am repeating

Minimum three sides, which means if there are three or more than three sides available to us we can generate a polygon.

Polygon is usually generated through straight lines and it is always a closed shape.

This means, if I go to the paint and I am generating a shape like this, this is a polygon.

This means the shape that is generated is closed and has more than one side also.

To generate a polygon we need at least three sides because if we want to close the shape then we can do it.

Here it starts from a triangle, after that the square or any shape related to square and rectangle is also a polygon.

So like square, rectangle, triangle, pentagon, hexagon after that as the sides increase the polygons also increase in N number.

So the thing to remember here is that a minimum of three sides are required and polygons are always closed.

When we mention any one, two or three points in a polygon, the third side automatically gets joined.

This means the more points we increase, the polygon joins the first and the last point.

Let's say if I am creating a pentagon, and I define five points like the first, second, third, fourth and the fifth, if I define 5 lines, the last line that generates gets connected by the polygon automatically. I do not need to externally define the first point again.

(10:32)

Let us perform it practically so that it can get clearer.

Let's say I want to generate a three-line polygon.

What I will do for that is.

Let's say I take the same SVG (5 sec pause)

And I add a polygon in this SVG, so for polygon, we need a polygon tag.

Inside the polygon you can see there is an attribute named "points", this "points" defines connecting which points we need a polygon.

We can give it randomly also, let's say points, here the first was 200 comma 10..which means the first point in the polygon will be 200 and 10.

This means the point I will get on 200 and 10 will be the first point in the SVG.

We will define the second point after giving a space, let's say in the example I have taken 250 and 190 so I will take 250 comma 190 here as the second shape.

If I take the third shape as 160 210 so let's say the third point 160 comma 210.

So, these are my three points

I have defined three points: first is 200 and 10, second is 250 and 190 and third is 160 and 210.

I will save it.

And if I go to the program and run it, here I get a shape generated.

If this is SVG, then this is my first point means 200 and 10. That means this is 200 and 10.

The second is 250 and 190, which means this 250 and 190

And third is 160, 210 means this is my third point.

So, I have only defined three points, I haven't externally written 200 and 10 again but still, the polygon is connecting the first and the last point.

So, as I defined three points the polygon shape gets generated and the shape by default comes filled with Black colour.

We can give it style, like here inside the style fill, stroke and stroke width are given.

Let's say I take style here,

Style Fill, let's say I want light green, and I need black as stroke colour and stroke width… as 2.

Now I will save it.

When I reloaded, the polygon is generated in which light green colour is added inside and black on the outside.

What we learned in the polygon today is,

That we need to give points in polygon and when we give points to our shape, the polygon tag adds the sides and lines respectively to every point.

Next is the polyline.

What is polyline?

Like the first tag was the Line, we drew one line in that.

We passed two points in totals such as X1 and Y1 or X2 and Y2, when we pass two points like this we get a line.

In the polyline, we pass more than 1 point, as we pass the points in the polygon are separated by a comma like 200 and 10 is the first point, 250 and 190 are the second, 160 and 210 is the third point.

Similarly, in polyline we pass more than one several points, the web page connects all those points.

The thing to focus on here is, that the last point in the polyline doesn't connect with the first line, because that is a polygon where we need to generate a closed shape that is why we connect the first and the last point.

But there is nothing like that in a polyline, a polyline is also created with more than one line but in that case, the last point does not connect to the first point.

So let's say, if we generate the same SVG, and use a polyline in the place of a polygon here...

save it.

And run.

So here I am getting the three points I have defined, 200 and 10, 250 and 190 and 160 and 210.

Means, 2 double 0 one 0 is this point (200, 10), 250 190 that is this one (250, 190), and third is 160, 210 that is this one.

What's happening here is that the lines are getting connected but because we have given "fill" that is why the shape is filling with colour, if I remove it.

Let's say if I remove "fill" and run (4 sec pause)

I will remove the style....

Still, it is giving it filled.

So, I will take fill "none".

Upon giving fill "none", it is not getting filled.

So as you saw, while giving fill, the lines are disconnected but the shape is covering, to avoid that we have given fill as none property.

The three points I defined are provided to me here.

Let's say

I generate the same thing again...

In the same SVG, I am adding more points as I have taken here in the SVG polyline.

Like here it is 20, 20…after that the point is 40, 25

40 comma 25

After that, it's 60, 40…

60 comma 40

Let's save it, after that we will move further

So, when I am running it I cannot get anything generated here

So let me comment on the first one..

Okay,

The moment I commented on the first one, I am getting the three points I defined (20,20), (40,25) and (60,40) here.

First is (20,20)

After that it's (40,25)

And here at the bottom, the last one is (60,40).

Here, I am getting two connecting lines.

Let's say we add it further,

Here (80,120) and (120,140)..

80 comma 120

120 comma 140

Here I have added two more points so here I am getting two more lines with two more points.

This means, as we are adding the points we are getting the lines.

In the last, there is one more point added (200,180).

The moment I add 200 commas 180, I get one more straight extended line.

This indicates that we can add as many lines as we want in the polyline but the first and the last points don't get connected.

If we have generated any random points, Let's say if I remove the fill..it must give something filled.

Okay, so here we are getting a shape the first and last point gets connected and we get a filled shape here.

If seen properly, the first and last points aren't connected but because of the fill colour, a line is visible here.

But in actuality, these points aren't connected.

So let's say if I again set fill as none and load.

So here there are our lines only, the last and first points aren't connected.

So that was the polyline.

The difference between polygon and polyline is, in polygon the first and last points get connected whereas in polyline last and the first point doesn't get connected.

We can add multiple, as many points we want in both polygon and polyline and the shapes keep generating.

So that was the polyline.

In the topic today we learned to draw a line where we add only two points,

The second was the polygon where we add multiple lines and a shape gets generated.

After that, it was the polyline where we can generate more than one connected line.

So these were the graphics we learned today.

Guys, I request you to try the graphics we learned today. These are a bit tricky and take some time to be understood but we can learn them thoroughly if we practice.

So I request you to practice these yourself.

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 session, we are going to continue SVG graphics only under which we will cover SVG path, text and stroking.

How we define paths, write texts and strokes.

Thank you, guys.