What are SVG Gradients?

Hello guys,

You are welcome to our html series.

In the last session, we learned about SVG path, text and stroke, how we add a path, add text and transform it, how we add a stroke and also the different properties of strokes.

The session today is related to gradients.

When we talk about gradients, it's important to understand what they are.

When we usually take any shape, let's say square for example.

When we go from the starting to the end, the color changes smoothly.

This means if the colour is white and at the end of the rectangle it's black, and when we show a smooth change from the white to the black, then that smooth change of colour is called gradient.

So, here is the definition of gradient there's mentioned the same, that the smooth transition from one colour to another and also several colour transitions can be applied to the same element.

It means when we are working with a gradient it's not necessary to add only two colours.

We can work with multiple colours also but the definition of the gradient is the smooth transition from one colour to another.

There are two types of gradients available in SVG

The first is linear and the second is radial, so we will see both of these in today's segment that what is linear and radial gradients.

First is the linear-gradient, as I gave in the example.

If we define a square shape then starting to end we move forward in a linear way.

This means we will start from a point, take a color and take another colour at the end point and pass the transition smoothly from the first colour to the second colour.

This is the linear gradient, which means we are moving forward in a line.

The tag we use to define the gradient in the linear gradient is "DEFS" which is "definition".

When we need to cover more than one tag we use the definition tag, we define linear gradient in the definition tag and other tags under the linear gradient we define other tags for start and stop.

So when we work with a linear gradient the first tag is the "defs" tag which is the definition tag.

Linear gradients are usually of three types:

First is the horizontal in which we move forward on the X-axis, second is vertical in which we move forward on the Y-axis and third is the angular in which we move forward in a cross.

So these three tags are available to us horizontal, vertical and angular.

We will come back to these three lines, but first, we will perform the example.

Let's say this is the example of the linear gradient.

Let us see this with an example.

Let's open our sublime text, start our new program

HTML gradient

Let's save it...

Linear.. gradient dot html

Save

So this is our program of the linear gradient

We will run it

(7 sec pause)

So this is the program "gradient", here the gradient will perform the work.

So let's say, when we work in this program as we saw we have to define SVG

We will give height to SVG, let's say I give a height of 150 and a width of 400.

Saved it.

Now, as we saw in the slide we first need a definition tag to define the linear gradient or gradient.

So that will be the "defs" definition tag, close that too.

Now, we have to define a linear gradient in the definition tag so it will start.

Open the linear gradient and close the linear gradient.

When you use these bigger named tags make sure you write the correct spelling otherwise it will not work.

So the first is the linear gradient.

So there is the property in the linear gradient, here we have to define what we have to give the gradient that is why we will need a shape and gradient also.

Because we need to connect the shape and the linear gradient, that is why we will give the linear gradient an ID, we learned why we use the ID in the class and ID segment.

We use Id when we have to uniquely identify an element in the whole web page.

Currently, I am taking an ID named "grad1", which is my first gradient .

As we saw there are two types of gradients one is horizontal gradient and one is vertical gradient.

So currently, we are creating a horizontal gradient, for the variables will be X1, Y1 means the starting point after that X2 and Y2 means our ending point.

So, from where we will start and till where we will end and in which way we have to perform our gradient

So let's say,

The colour we define on the starting point will be 0%, but the gradient is linear and moving forward in the X direction so we will change the X values and keep Y as it is.

I am repeating, if we want to do linear in X direction then we will change the X values and keep the Y values the same.

Let's say I set X as 0% to 100%, which means we have to move in the X direction and change the colour from 0 to 100%.

So that is the gradient, now we have to define starting and ending colours in the gradient.

For that we will use a stop tag, in the stop tag, we will first define offset.

Offset means when we are starting the point from where it will start, as you see that the X1 and Y1 are starting from 0% and going up to 100%.

When we are at 0%, the first offset will be 0%.

The second offset will be 100%

Which colour do we want to give when we are at 0%, and which colour at 100%

So let's say, I give colour on 0%

We will use the style tag for this

Stop colour, here we can take any colour,

Let's say I define yellow and red as the colour in which I want to transform them.

This means I am performing a linear gradient where a transition performs from yellow to red colour.

So we have shapes available like Circle, ellipse and rectangles so let's say I take an ellipse shape here.

As we know there is an XY centre in the ellipse and two radiuses X radius and Y radius that is RX and RY and then we define whether we want to fill or not.

Let's say I first take the centre, I take X centre let's say as 200 and Y centre as 70, so I will start the ellipse from the point (200,70).

Then I will take RX which is my radius, let's say I take 85, and RY that is my Y radius, 85 in the X direction and 55 in the Y-direction.

This means the ellipse will be horizontal.

So this is the ellipse, now I want to fill the ellipse.

How to fill?

So we have two options,

So first I take fill...none

Okay

Currently, I will run this program and we cannot see anything because the ellipse has filled with none

Let's say I remove this fill

And run after saving it

I am getting the ellipse shape here but currently, I am getting it in black colour because I have removed the fill from the code.

As I have removed the fill I cannot see anything here but let's say I want to fill the ellipse with the colour we defined in the gradient.

In that case, here I will write fill equals

Because we need to connect this gradient with this ellipse, I will use hashtag here, sorry, URL and hashtag inside the URL.

Hashtag stands for Id, as we know there were two types of selectors: class and ID, so the class is used with dot or period and ID is used with a hashtag.

So I will use a hashtag here and I will use the same name which I gave in the id of a linear gradient.

This means when I want to use this linear gradient to fill the ellipse, I will use the URL function to fill the ellipse.

The URL is the function and with the hashtag, my “grad1” Id will come.

Let us save it.

When I run we get the ellipse in which the start colour is yellow and the end colour is red.

And it's a smooth transition when the yellow is transitioning to red not as directly changed from yellow to red but slowly yellow to orange and then red colour.

So this is the gradient and how it is defined.

So when we go from the start to the end the colour of the transition that is performed is smooth.

This was the horizontal gradient.

If I have to define the same gradient vertically, what we will have to do here.

The X that we changed and Y we kept the same here, in that place I will change Y and keep X common and by this, the gradient will change vertically.

0 to 100

We are getting the same output, the reason is we copied and wrote the same gradient and didn't change the ID.

Here gradient 2, it will be gradient 2 and here also Gradient 2.

So, if I am defining two gradients I will need to change the IDs and will have to change the X2 and Y2 here, so I have changed it.

The moment I changed the ID, the first one is horizontal and the second is vertical.

Vertically the colour is changing from yellow to red.

Now we will see if we want to add a text with this same Gradient of the colour.

Let's say when the gradient is performing and I want to add a text, then what I will do in that case.

So, If I want to add, I will use the text as we saw in the last segment.

Let's say I give a few properties in text because the gradient portion is ellipse black colour might not appear in that case I use white colour here and along with White colour I have to define from where I will start the text.

Let's say I want to start the text in the SVG from (0,0) position… and then I write learnvern.

Save and run

So we can see a vertical gradient is forming but learnvern is not visible because we have started from the top and are moving forward in this direction.

Let's say I add 150 and 85 in the same a bit ahead in the x-direction and below in y-direction.

Same, I will perform here.

Okay

So, the learnvern is appearing here.

Earlier the learnvern was starting here and white colour wasn't shown in white colour but now it's visible.

I will increase the font size...

Font size 40

Okay

Here we are getting learnvern but the portion after VE is cut because the font got bigger.

Okay...

Here we have shown learnvern as a text in the gradient.

So if you want to keep only a simple gradient in the gradient you can keep it as the horizontal and vertical gradient we saw, if you want to add text in the Gradient you can do that with the help of the text tag.

So that was the gradient. The first Gradient we learned is the linear gradient

Next, we will see the radial gradient.

Linear means when we moved forward in X and Y direction, now we will see radial.

But in the last slide, we left these two lines which indicate,

Horizontal gradients mean in linear gradient when we move in X direction then horizontal gradients are created when y1 and y2 are equal and X1 and X2 differ.

So, you can see that in the first gradient we created, we changed X and kept Y1 and Y2 the same.

So this first line indicates the same.

Second is, vertical gradients are created when X1 and X2 are equal, which means the X1 and X2 are zero and Y1 and Y2 differ like we did 0 and 100 here.

Angular gradients are created when X1, X2, Y1 and Y2 differ, so if we change everything.

Like here X1 is 0 I will set 50 in X2, 30 in Y1 and 100 in Y2, in that case, few differences will generate.

As you can see, now the gradient is starting from here and not from here, so like angular, the gradient is generated in a cross.

So that is the angular gradient,

So in this way with different combinations, we can generate linear gradients whether horizontal, vertical or angular.

That was the linear gradient

Next is the radial gradient

Radial gradient means a gradient in which we are not moving from the initial point to the start point and from the overall point to towards the inside instead.

This means, If we consider a circle we are either going from the centre to its outers or from outers to centre this is called radial gradient.

Radial means, we use it when we have to generate something in circular form.

Let's say we copy this from the same program to generate radial gradient...

And we will perform the mandatory changes.

Here I use the HR tag so that we can identify that this is different.

Now, in this code, we are using radial gradient in place of the linear gradient so let's change the linear word with a radial word, same here also.

When we play with a circle the terms for linear will not be used.

Let us change the ID to Gradient 4.

Okay

As we saw, we moved from one point to another in the linear; this will not come and some change is there in the radial.

Like when we generated the shape of the circle we had three attributes XY that defines the centre and the third was the radius.

Same way, there are five attributes in the radial gradient, first is CX and CY defines the centre, "R" defines the radius, and FX FY defines the points of the inner circle.

This means we have CX and CY for the outer circle and FX and FY for the inner circle.

That means we are performing the radial gradient from CX CY to FX and FY.

So, here it will be CX, CY, R and FX and FY, these are the five attributes of the radial gradient.

Now we will perform these,

Let's say I apply 50% to the centre which means I apply 50-50% gradient to x and y, I will apply 50% to the radius and 50% to the inner sides also.

Currently, I have applied a 50-50% gradient at all the places.

Let's run this thing. so the moment we run this,

This is the HR line, we are getting red colour in the outer circle and yellow in the inner circle.

And the gradient is performed from the outer to the inner side, so this is our radial gradient.

CX CY stands for a centre, after that it's the radius, and then the FX FY that is the outer circle.

The inner circle is with a 50% gradient along with 50% in the outer circle, and it appears to be smooth.

If I want the red colour to be less and more yellow colour, what we can do is.

We will go to the program, we will change the radius and when I increased the radius from 50 to 70 the yellow portion is more visible and red is less visible.

If I want more red in its place, I will decrease the radius.

And the moment I am reloading after saving it, the red colour is increasing and yellow is less visible inside.

When we move from the centre to the outer part the radius defines in which way the gradient is increasing.

We initially took 50%, yellow and red were visible in the same proportion, when we increased the radius the inner colour is more visible and when we decreased the radius the inner colour is less visible.

So that was the radial gradient,

If we want to cut a portion or show it bigger we can do it in radial gradient.

Let's say we have the Ellipse, and I want only 1/4th portion, not the complete portion, in that case, I will define CX and CY 100-100% and I want that only one-fourth portion should be visible.

As you can see, the ellipse is not shown complete but in one-fourth portion in some shape.

When we perform changes with the centre and the FX and FY, means the percentage of inner and outer colour we can get different shapes.

So, if we want to get different curves from the ellipse we can make changes in CX CY and FX FY and can also grab different shapes.

Let's say, I give 0 to X, 0 to Y, keep the radius the same as 50, and 50-50 to FX and FY.

In that case, when I saved and reloaded the program I am getting one-fourth part of the ellipse, which indicates as we perform changes in FX and FY or RX and RY we get different shaped Ellipse here.

Along with it if I change the radius, some changes will be performed in the shape like this means our radius is also changing.

So as per the requirement, whatever graphic you want to generate with the help of linear or radial gradient through shapes like ellipse, circle, and rectangle you can play with and make changes in the radius and centres and you can create the desired shape you want.

So that was today's concept in which we learned about linear and radial gradients.

There were a total of three types in linear horizontal, vertical and angular in which we performed gradients like straight, vertically aligned and crossed.

And the second was the radial gradient , nder which we move inside the circle and ellipse while performing the changes in the colour.

These were important topics for gradients.

I request you all to perform the practical of the gradient in your system at home.

When you perform and it runs, it is really well and good and 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.

The next topic will be canvas,

We have completed the topics related to SVG and in the next topic, we are moving on canvas.

We generate graphics in canvas also, but in SVG we generate graphics through html, in canvas, we will see some introduction of JavaScript and generate graphics simultaneously.

So in the next topic, we will learn canvas

Thank you.