Hello guys, I am Shahzad and welcome to lecture number eight please we are going to discuss about the SV g in the graphics sections to make sure html5 has introduced few elements, which is the canvas and also the SVG to draw your graphic on the webpage. We have discussed the canvass in our previous lectures. And now it's time to discuss about SV G, make sure we have a single file, which is the index for HTML. And it's available in the html5 directory, and html5 directory available in the issue of directory and also issued abstractly available in the exam. And this is a C drive. So right click, so this is the file, double click.
Open this file. Okay, fine. Now it's time to discuss the canvas. I'm going to comment this section. So you can easily get the code here if I write the s, V, G, miniature parties as we the SVG is a W three or recommendation of Stovall and stand for Scalable Vector graphics. You can define the graphics for the web, using s v, G, make sure the SVG element is a container is just a container.
For the SVG graphic, we'll discuss about this. But for now, I'm saying SVG. Make sure you have to close the SVG, s v, G. Okay, now I need few. Okay, now you have to define the word First of all, and the height create your SVG circle. Now I'm saying it's 400 by width and also the 200 height. You have to define the circular make sure you have to close this And now I'm saying that cx or the x axis, cx equals two.
And also the C y, we are going to define, or three. And now I'm saying the radius is what? Make sure it's 40. And now you have to use the fill. Now I'm saying it's blue. You have to define the DS.
I'm saying 60. And also I'm saying 60 am saying not supported. svg, not supported by your problem, because your browser is very old, or not up to date. So now go to the page, refresh the page. As you can see, it's fine Make sure if I'm using the stroke as green, I need the border here. So how can I do that I'm saying stroke equals to green.
So now you can see it's showing you the green. And you have to also define the stroke with I'm saying, stroke Sorry, it's with it's also the fourth, go to the very depressed debate. So now you can see us scope for if you're using the three stroke and you can see now it's lifting or one and it's all one stroke or solely depend upon your requirement. So in this way, you can create your as we g elements or you can define your drop Based on your webpage, if I I want if you want to create the rectangle, so how can you create the rectangle. So now similarly, copy this red wall to see your time now is founded, make sure it's 400 by 100 and this time it's a rectangle. And parameters is different.
Now, it's a rectangle, rectangle width is 400. Height is 100. And also you can define the sky here. Sell RGB your core here 00 and 258 and the stroke worth then and also the stroke is RG RGB sorry RGB it's 000. So now go to the page and refresh the page. So now as you can see you have your element Sorry, I have to come into this one.
Now you have your elements, you will also define like this stroke stroke Remove this one. If you're not familiar with the CSS refresh, it's fine. And now you can also use the film I'm saying filled with olive. As you can see, it's Olive. And now, this is a stroke, green. So this is a grid stroke and also with the all f playground.
So in this way you can create the rectangle. So how can you create the rounded rectangles? So it's very simple. You have to use the rectangle. Have to close the SP g Okay, fine. Now I'm going to create the rectangle, use the SVG tag.
Okay, I'm going to copy this to say my time. And now I'm going to come in this bad boy. I'm saying it's 400 and the height is 190. And now you have to define your rounded rectangle, so it's a rectangle. And also you have to define it's a 400 width and 400 height. Now I'm saying x equals 250 is for the x axis, and y equals two I'm saying 43 and the R x, r x equals to 20 So now go to the page refresh the page.
So now as you can see you have created the rounded rectangle. You have to use the RX both side especially sorry is for our wife. Okay, if I'm saying that 100 by 100 Okay, it's fine hours around it because I forgot to reduce the words. Okay, so now it's wrong. So now as you can see, it's working fine. So in this way you can create your SVG you can create with a star and you can also feed us MIDI logos