How to set Path, Text and Stroke in SVG?

Hello guys,

Welcome to our HTML series.

In the last segment, we learned shapes like lines, polygons and polylines.

The graphics we are learning and all the shapes like circle, rectangle, ellipse and from the last segment line, polygon and polyline.

I hope that you tried and performed the practical of all the shapes at home.

Today also we are moving ahead in graphics.

The session today is path, text and stroking in SVG.

Firstly, we will start from the path in SVG.

What is a path?

When we move forward in a particular direction on a web page it is usually called a path.

To define a path we use angular bracket "path" angular bracket close, path tag.

When we define a path we guide the web page where to start and in which way we have to reach the end point.

For example,

Few commands are written here

If we use character M, it means move to.

If we want to start from any point, or if we want to move to a point from the starting point in the SVG we define, we indicate that through "M" and M stands for move to, it's like move to that point.

So, the first is the "M" move to.

After that when we reach our desired starting point, and after that if we want to draw a line from the starting to the end point.

We represent that line with "L", L stands for a line to.

So, Firstly we go to a starting point using M (move to) after that we draw a line from the starting point to the desired point using "L" (line to).

So, usually, if we take any SVG, in that SVG, the move to (M) comes one time and L (line to) multiple times because we only need to go to the starting point only one time.

After that, we go to multiple lines like from A to B, B to C, C to D. So if we take different paths like this we can use Line as many times we want.

If we want to draw a straight horizontal line in the SVG, we use H for that and if we want to use a vertical line we call it "V".

When we stop drawing in SVG means when the path is finished, we use "Z" at the end.

Z indicates that the path we drew is ending so placing the points is ending.

So, the start will be from M and the ending will be with Z.

If we use the L, H, V after M, they give us straight lines.

If at any moment we want a curved line or turning line or we need to draw an arc, in that case, we can use commands like "C" and "S".

C stands for a "curve to" and S stands for a smooth curve.

For a straight line, we will use L and for a curved line, we will use C or S.

If we see the SVG path with an example, it will become clearer.

So, as this is the example of the SVG path.

Let's say we go to our sublime text and set HTML...

HTML

We will name the program as "SVG Path", in today's segment we are going to learn text and stroking.

So SVG path, text and stroking

Save it.

SVG path, text, stroking dot html.

The program is saved.

Let us run the program (6 sec pause)

So our program is running, initially, we haven't defined anything in the body tag so it's empty.

Let's start with the SVG tag...

Save

As per the slide, we will first define the height and width of SVG that we need this big SVG.

..

200

And let's say I take a width of 500.

After that, we are defining the path, so as written here.

There is an attribute "d" in the path tag, it stands for direction so we will mention all the points of the path inside d.

So, we will start with the path,

Inside the path, it's "d equals (as we know first we use Move to)

So let's say M after M we moved to point "one five zero zero" (150,0)

So my first point will be 150, 0, so I have moved to 150 and 0.

After that I need to draw a line.

I will use Line.

The point that will come after L is 75, 200

The next point is (75, 200)

If we explain this first in the SVG we moved to point (150,0) after that and starting from that point (150,0) we drew a line to the point (75, 200).

So for this, we will use the "M" command first and then the "L" command and I will close this with "Z".

Save and run

Here it is not visible, so what might be the issue.

This means, our path is not properly closed, either, we need one more point to close so let's add the third point as well as given here L (225,200).

So here I will add "L (225 and 200)" space and "Z".

Here we are getting three points, the first is (150,0), from this we will draw a line to (75,200) from here we will go to (225,200) points and at the end, we will close the path.

Closing the path means, from the first point to this point the path is getting closed.

Let me save it.

And after saving, I will run it

The moment I run, we are getting a triangle shape. This means the path we drew is a filled shape or a filled triangle and we are getting it as a shape.

Let's say we add something else in it or any point, I am taking a random point currently like (L 120,20).

I will save it.

The moment I run it, now we are having a total of 4 points here. As soon as we add the point, the path is generated something like this.

Here if seen, we have 1 2 3 4, four points here, starting with this point this is our second point, this is our third point and this is our fourth point.

And from the fourth point to the first point the shape is getting closed... (08:33)

Let me zoom in a bit.

So this point here is the very first point that is 150,0 that is here, after that it's (75,200) that is here so a line is drawn from there to here.

After that, it's (225, 200) that is here and a line is drawn from there to here.

After that, it's (120, 20) that is here so, a line is drawn from here to here

And when we used "Z" means we used the closed path, the path is getting closed.

So that is how we define a path in SVG, and the path we define gets closed in this way we get a filled shape using the path.

That was our path.

Let's say now we need to draw a smooth curve, which means an arc in the SVG, so how we will do that.

Currently, I will comment this path and add one more path in that I will add "d" we need to define a few paths.

So let's say I start with "M" and start from the (100,0) point in the SVG, I can start with the (0,0) point also.

Let's say I start from (100,0) point and from there,

As you saw in the previous example, we use capital L to draw a line.

Let's say we aren't drawing a line but a curve, for that we will write "S", S stands for smooth curve and after S, we will write the second point.

Let's say I take the second point as (150,200) and save it.

I think we will not get any result because we have defined only two points.

From there, I will define one more point (300,0) and I will save it.

When I save it and run, I am getting a shape like this as you can see I get a filled shape and a curve along with it.

This means the point (100,0) is here, after that (150,200) is here and the last (300,0) is here.

So three points are defined here, if I draw it with a line we are getting a line.

But because I have defined a smooth curve, let's say capital S and save.

I am not getting a line but a smooth curve in that portion.

Now let's say, I don't want it filled and I only want a stroke so I will define a stroke property I will give blue color to it.

Save

We are getting a border in blue but it's not properly visible because we have given fill color also so let's say I take fill as none.

So here on the SVG, we are getting a curve, this indicates that we can give both straight lines and curves as a path.

There is one more property stroke width that we wrote about yesterday.

Stroke width in this let's say we take 5, the curve gets a bit thick.

So this is our stroke width.

So when we worked with SVG and saw different examples, we used strokes, fill and stroke width. using these, we can generate shapes or paths and lines.

So that was all about the path,

Next is about SVG text, when we need to add any text in SVG, in that case, we use the text element of SVG.

This is our text tag.

Let's go to.. program

We will take SVG.

We will see text with the help of examples so that we know how we can add different texts.

Usually, if we type something,

Let's say if we add "hello how are you" and run this program, we get "hello how are you" on our screen because that is also a text but that is an HTML text.

If we want to add a text in the form of SVG instead of this, how can we do it?

Firstly we will add an SVG (5 sec pause)

We will give height and width...

After that, we will use a text tag.

In this, we have to mention the initial points from where we have to start the text.

So let's say (5 sec pause) I give X equals 0, Y equals 15 in the text, here fill is used and here "I love SVG" is written, we can use any other text in this place.

Here you can see we are getting the SVG, and we are selecting it.

The highlighting or marking color is different, it's a bit blue and the text or the font is also given in a different font style which is the SVG font style.

When I wrote... "hello how are you",

There is a lot of difference in both the font styles, when we use SVG we get the font in different styles because that is SVG.

Let's save and run.

Let's say, we use the property fill red as given here and see what happens with this..

The moment we used fill property as red the color of our font changed, as earlier the default one was black but here the text is in red color which indicates we can get the text in different colors.

The difference between other SVG tags and text is that in other tags we didn't need to use the closing tag but in the text, we needed to use the closing tag because we added the text we wanted to add to the web page within the opening and the closing tag.

That's why, we have used opening and closing tags for text only.

We have another example for text in which we have used the transform property.

What transform property usually is, when we want to move or tilt the text, in that case, we use the transform property.

So let's use the property, transform… inside that rotate is given, and we have given 30,20 to 40.

So let's say from point (30,20) to 40.

Let's see the output, the moment we did that the text got titled a bit as we can see.

And the text is also cutting which means the height of the SVG is falling short.

So let me get 100 height, the moment I increased the height of SVG the text is getting covered now.

Earlier the text was horizontal but now we have rotated the text.

What we did is we defined the point and rotated 40 degrees from 30 and 20, which indicates we can show our text straight or we can give it a movement or rotation also.

So, that was the transform, when we want to perform a few attractive designs based on our requirements or we need to rotate or transform it we use the transform attribute in that case and to change color we can use fill.

So, that was our text.

Next, is the stroke, what is a stroke on SVG?

When we draw a straight line it is called a stroke.

There are different types of strokes available with different properties in SVG.

Firstly, we will see a simple example of stroke

We will see different stroke lines with one by one example.

We will first define the SVG as we always do. (5 sec pause)

And we have used "g" inside it, now the question is what is "g"?

When we use the "g" tag, it indicates that we have used multiple elements in the SVG and not only one.

For example,

In our program, in the first SVG, we have used only one path, so when we need to use multiple paths and combine them inside one SVG, in that case, we use the "g" tag.

Let's say "g" is written here and after that fill none, so by using "fill none" we do not get the background color and that is very important.

So let's say "g" fill none.

After that, we are going to define three paths, which will provide us with strokes in different colors.

So let's say here it's the path..stroke, its given color is red and now there are the points that are "d", we have to go from 520 to 210.

(4 sec pause)

Save and run.

So here we are getting a line in the web page, we are getting one path here.

In the same way, we will add other paths, let's say we have a black coloured path here which is from 540 to 215 0.

So let's copy the same,

Three times because we are adding three.

Here we will give black color and here blue color,

540 and last is 60,

Save

..

And close the g tag

Save

As you can see that we are not getting the output, so let's close this as shown in the example.

Save

Okay, so the moment we closed it, we are getting three lines, here the M means move to, to go to the starting line. So we went to three points (5,20) (5,40) and (5,60) and we drew lines connecting the same point that is (215,0) that is a common point and it's here.

And the different points we started with are (5,20), (5,40) & (5,60). so the lines we are getting in different colors are stroked lines because we used the stroke property here.

We have used strokes in different colors red, black and blue so we get strokes in different colors.

Now, the first property in stroke was stroke color the next property we will learn is stroke width, how can we give stroke width.

So let's say if I use the same paths here..

And if I change stroke with stroke width I will give 5 to the first (7 sec pause) and 10 to the second and I will give it a 16.

Let us save and run..

We cannot see the color, so here in fill none let us give a default Black color to the stroke.

When we run it we are getting three strokes, we have taken more width that is why we cannot see them properly that is why I will take 2.. 5 and 7.

Now when I run it, we are getting the strokes which are different in width, so first is a bit thin because we gave a stroke width 2, after that the stroke is a bit broader that is 5 and broader than that, that is 7.

So that was the stroke-width property.

After that it is the stroke line cap property, line cap means it defines where the line ends.

To understand that, I will change this….215 and add something else, let's say I need a horizontal line, in that case,

okay I am getting a horizontal line, same I will add here 200, 40 and here I will add 200.

Okay, so the lines are getting straight, 60

Okay, so we are having three straight lines.

As you can see, to draw straight lines I kept the Y coordinate of the line common and changed the X coordinate, so I got three straight lines.

Now the property we have to see is the stroke line cap, what happens with the stroke line cap is that we add a cap on the ends, which means on the starting and the ending points.

There are different types of line caps.

The first is...

I will comment on this...

I will add a stroke.. line cap here and use butt, let's see what happens with the butt.

We get a straight line using butt and we get the end points cut.

Next is the round (6 sec pause)

Save

And the last is square.

So here the thickness is less due to which we are not able to see anything, so I will give the stroke width here.

We have to give it to the common from above if I give 6 as stroke width.

Okay

So we gave a larger stroke width which is why the strokes are looking thick in width.

Now, we can see what is the difference here.

When we use "butt", we have a normal line cap like a usual line end.

When we use round, we get a curved line ending and when we used square, it ends like a square shape.

So, these were the three types of line cap properties.

The last is the stroke dash array, what happens with this is, if we want to show the line dotted, continuous or where to show it is broken we get it through stroke dash array.

So let's do the same,

Here we will copy and paste it, and write the stroke dash array property.

We have a type in stroke dash array in which we know where to discontinue it in which type.

So let's say, in the first line I give 5 comma 5, so after every five points some difference will come in the line, so that is this one.

On X and Y after every 5 points, the line is breaking now if I need to do the same thing after every 10 points and I want the break to be a bit large, I will use 10,10 here.

So what happens is here the line came to 5 and then I got the gap but what happens here is it comes to 10 and after that the same 10 points cut is provided.

So, in this way, we can create a designed line

Let's, say now I want to create a line that continues and then I need a small break, then again a small break, then a big break,

This means we can define a differentiated break also, it's not important to apply common breaks like 5 or 10 every time.

Let's say, now I have to give a different break, like 20 breaks 20, after going to 10,we need a break again after that again we need small lines like 5, 5 means small lines two times after that we need a break of 5 after that again we need a line.

Let's save it

And when we run

We get a line that going till 20 means starting from 0 to 20 pixels

After that, we get a break of 10,

After that, the line is going till 5 then break of 5.

Again a line of 5 after that a break of 10.

Then, the moment this array ends it gets repeated.

I am repeating.

Here we wrote, 20 10 means a line of 20 pixels in the X-axis

After that 20 pixels linE.

After that 10 points break, then a line of 5 points and 5 points break that is this one.

Again 5 points line that is the third 5, then a break 10 points that is this one.

So this forms an array, as the array completes it starts again until here.

The array starts again until here, after that it continues until the line ends.

So that was the dash array property of stroke.

So we learned a total of three properties:

How we create strokes, how the width of stroke is defined, if we want to add line caps on the end of the strokes and along with it we see a dash array of the stroke means how we can add different breaks in the stroke.

So, that was today's segment about path, text and stroke, we have already covered the examples.

In the next segment, we are going to learn about SVG gradients.

So, the segment today in which we learned about text, stroke and path is a bit tricky because for that, our math should be clear.

When we start a point where we have to start and up to where we have to go.

We normally give the text in HTML, but when we give the text in the context of SVG how can we play with that, and learned how to transform it.

And along with it, we learned about the stroke, like the different strokes we give what are the different properties of stroke, and how we can achieve different types of strokes based on the requirement.

I request you all to try, run and perform the practical of the things we learned today.

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 about the SVG gradients.

Thank you.